把世界设定从代码里抽出来,变成好维护的数据

流水线第 5 站 · 数据。上一步你的世界内容是直接写死在 HTML 里的,这一步把角色、美食、设定抽成一份结构化数据(JSON),让页面『读数据来渲染』——以后维护和扩展都只动数据,下一步进入【测试】把整个世界站验收一遍。

by @数据老周·来自小红书 ↗·收录于 2026 / 04 / 14
拆 · DECODE

提示词原文

你是一位资深前端/数据建模工程师。我有一个单文件 HTML 的异世界展示页(青春热血,魔法 × 美食,友情和梦想),现在角色、美食、设定都是直接写死在 HTML 标签里的,改起来很麻烦。我想把内容和代码分开。 请帮我做『数据驱动』改造,按以下步骤: 1. 先帮我设计一份【JSON 数据结构】:把世界拆成几类内容(如 world 世界基础信息、characters 角色数组、foods 美食魔法数组、story 主线片段),每类列出该有哪些【字段】(角色比如:name 名字、role 身份、dream 梦想、flaw 缺陷、color 主题色、avatarShape 头像形状描述); 2. 把我现在 HTML 里写死的内容,迁移填进这份 JSON,确保不丢信息、字段命名前后【一致】; 3. 改造 HTML:保留页面结构,用一小段原生 JavaScript 读这份 JSON、循环渲染出角色卡和美食列表,做到『加一个角色只需在 JSON 里加一条,页面自动多一张卡』; 4. 演示一遍【增删改查】里的『增』:教我怎么在 JSON 里加一个新角色,让我确认整套流程能跑通。 请保持单文件可嵌入(JSON 可内联在 script 标签里)。先给我数据结构设计让我确认,再动 HTML。 【当前 HTML】:{贴这里}You are a senior frontend/data-modeling engineer. I have a single-file HTML showcase of an other-world (youthful & hot-blooded, magic x food, friendship and dreams). Characters, foods and lore are hardcoded in HTML tags, hard to edit. I want to separate content from code. Help me make it data-driven, step by step: 1. Design a JSON data structure: split the world into categories (e.g. world basics, characters array, foods array, story fragments), and for each list the fields it should have (a character e.g.: name, role, dream, flaw, color, avatarShape); 2. Migrate my current hardcoded HTML content into this JSON without losing info, keeping field naming consistent throughout; 3. Refactor the HTML: keep the structure, use a small piece of vanilla JS to read the JSON and render character cards and food lists in a loop - so adding one character is just one entry in JSON and the page shows one more card; 4. Demonstrate the C in CRUD: show me how to add a new character in the JSON and confirm the whole flow works. Keep it single-file and embeddable (JSON can be inlined in a script tag). Give me the data design to confirm first, then touch the HTML. [Current HTML]: {paste here}

轻点带虚线的术语,看它的解释。点右上角「译」切换中英对照。

为什么这么写

这是世界线的第 5 站 · 数据。 它解决一个小白早晚会撞上的痛:内容写死在代码里,改个设定要在一堆标签里翻半天,还容易改坏排版。

这一站的核心,是把『内容』和『代码』分家——这正是数据环节的灵魂。

三个设计点:

第一,先设计 field(字段)、再迁数据。让 AI 先想清『一个角色应该由哪些字段组成』(名字、梦想、缺陷、主题色……),相当于给世界里每类东西定一张『表头』。结构定好了,内容才有地方安放。

第二,JSON 装内容,让页面『读数据渲染』。改造后,角色卡不再是手写的 HTML,而是 JS 循环读 JSON 自动生成的。好处立竿见影:加一个角色=在 JSON 加一条,页面自动多一张卡,再也不碰布局代码。

第三,盯住 consistency(一致性)并演示 CRUD 的『增』。迁移时最容易字段命名前后不一(这里叫 dream、那里叫 desire),导致渲染出错。强调命名一致,并让 AI 带你走一遍『加一个新角色』,你就真正掌握了『数据驱动』这件事——这是从『做出一个页面』到『能持续养一个世界』的关键一跳。

跟完这一站,你的世界变成了『内容+模板』两层,好维护、好扩展。带着这个更健壮的版本,进第 6 站【测试】,把它认真验收一遍再拿出去给人看。

这条用到的术语

  • JSON
    JSON
    前后端传数据用的「通用格式」,长得像一份结构化的清单(键: 值)。它轻便、人和机器都能读,是网络数据的「普通话」。
  • field
    字段
    表里的「一列」,比如用户表的「姓名」「手机号」「注册时间」。字段定义了「这类数据由哪些信息组成」。
  • CRUD
    增删改查 CRUD
    对数据的四种基本操作:增(添新)、删(去掉)、改(修改)、查(找出来)。几乎所有功能本质上都是在做这四件事。
  • consistency
    数据一致性
    保证「同一份数据在哪看都一样、不矛盾」。比如你转账后,余额必须立刻对得上,不能这边扣了那边没加。钱相关的系统对它要求极高。

可替换变量

同一句话,换一个词,AI 会给你完全不同的故事。

JSON 内联在 HTML 里拆成独立的 data.json 文件内容和模板彻底分离、更清爽;但变成多文件,嵌入时要一起带上
前端读 JSON 渲染接一个轻量后端/在线表格当数据源可以不改代码、在线编辑内容;但要引入后端,复杂度上升(属第 4 站后端范畴)
演示『增』一个角色做一个简单的本地编辑小面板更进一步,做成能在页面上直接增删改查的小工具,但工作量更大