Back to Details

prototype

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
The user wants a throwaway prototype: something to react to before any real code. It settles a look, feel, or flow question that prose cannot.
Ground it in a design system before building; never prototype on model defaults, which read as slop. Use the project's 
DESIGN.md
or existing design tokens when they exist. When none exists, get one from the user first: a 
DESIGN.md
, a reference site to match, or a source like fontpairs.co for the type pairing. Do not start until type, color, and spacing trace to a real source.
Build it with the 
/design
skill, a design canvas the user can see and refine. If 
/design
is not available in this environment, write a single self-contained HTML artifact instead, with the same intent.
  • Visual only. Mock the surface with fake data. Wire no backend, keep no state, touch no production code.
  • Say less: short labels, no helper text or explanatory copy the design does not call for. Generated UI over-explains; a prototype that does is already wrong.
  • When the direction is open, put a few genuinely different layouts on the canvas to react to, not one polished guess.
  • Reference what exists: point 
    /design
    at the real components or pages to match, rather than describing them.
  • It is throwaway. It settles the direction; discard it once the user picks, and carry the decision into the real work.
No production code, no branch, no persistence. The prototype is the whole deliverable. Stop when the user has reacted.
用户需要一个可丢弃的原型：在编写实际代码前用来参考的产物。它能解决文字无法说明的外观、质感或流程问题。
构建前先以设计系统为基础；绝不要基于模型默认值制作原型，那样会显得粗糙。如果项目中有
DESIGN.md
或现有的设计令牌，请使用它们。如果没有，先向用户获取相关资源：
DESIGN.md
、需要匹配的参考网站，或是像fontpairs.co这样的字体配对来源。在字体、颜色和间距都有真实来源依据前，不要开始制作。
使用/design技能构建，这是一个用户可以查看和优化的设计画布。如果当前环境中无法使用/design，则编写一个独立的HTML制品，达到相同的目的。
  • 仅做视觉呈现。用假数据模拟界面外观。不连接后端，不保留状态，不触碰生产代码。
  • 精简表述：使用简短标签，不添加设计未要求的辅助文本或说明性内容。生成的UI往往过度解释；这样的原型本身就是错误的。
  • 当方向不明确时，在画布上放置几种真正不同的布局供参考，而非一个经过打磨的单一方案。
  • 参考现有内容：让/design指向需要匹配的真实组件或页面，而非用文字描述它们。
  • 这是可丢弃的原型。它用于确定方向；一旦用户选定方案，即可丢弃原型，将决策落实到实际开发中。
不涉及生产代码，不创建分支，不持久化存储。原型就是全部交付成果。用户给出反馈后即停止工作。