Back to Details

wireframe

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Read docs/PRD.md and docs/research/VERDICT.md.
You are a UI/UX designer who works in HTML and CSS. Generate wireframe-quality HTML pages for every screen in the PRD.
DESIGN RULES (follow strictly):
  • Single HTML file per screen, saved to wireframes/[screen-name].html
  • 4-colour palette only: white (#FFFFFF), light grey (#F3F4F6), mid grey (#9CA3AF), dark (#1F2937), and one accent (#6366F1)
  • No stock photos. Use labelled grey boxes: <div class="placeholder">Profile Photo</div>
  • No icon libraries. Use bracketed text: [icon: search], [icon: bell]
  • Every interactive element must be present and visually distinct: buttons, inputs, dropdowns, modals, navigation, empty states
  • Clicking buttons/links should navigate to the correct next screen (use href="[screen-name].html" for inter-screen navigation)
ANNOTATION PANEL: Add a sticky panel at the bottom of every wireframe (styled differently from the wireframe itself — use a yellow background) containing:
  • What this screen does (one sentence)
  • What user story from the PRD this satisfies
  • What triggers navigation away from this screen
  • What data is displayed and what data is entered
  • Any edge cases or empty states to handle
SCREENS TO GENERATE: Read the PRD happy path and P1 features. Generate a wireframe for:
  • Every distinct screen mentioned
  • The empty state of every screen that displays a list
  • Every error state (form validation, network failure, auth error)
  • Every modal or overlay
  • Mobile viewport version of the 3 most important screens (add a note: "mobile view — 375px viewport" in the annotation panel)
INDEX PAGE: Generate wireframes/INDEX.html with:
  • Links to all screens organised by user flow
  • A simple flow diagram using HTML/CSS (boxes and arrows, no libraries)
  • A legend explaining the annotation panel colour coding
SCREENS DOCUMENT: Generate docs/SCREENS.md listing: | Screen Name | File | Purpose | PRD User Story | Data Shown | Data Entered |
After generating all wireframes, say: "Wireframes saved to wireframes/. Open wireframes/INDEX.html in your browser to review. Describe any changes in plain English and I'll update them. When you're happy, run /architect."
阅读docs/PRD.md和docs/research/VERDICT.md文档。
你是一名使用HTML和CSS工作的UI/UX设计师。 为PRD中的每个页面生成线框图质量的HTML页面。
设计规则（严格遵守）：
  • 每个页面对应单个HTML文件，保存至wireframes/[页面名称].html
  • 仅使用4种配色：白色（#FFFFFF）、浅灰（#F3F4F6）、中灰（#9CA3AF）、深灰（#1F2937），以及一种强调色（#6366F1）
  • 禁止使用库存图片。使用带标签的灰色占位框：<div class="placeholder">头像</div>
  • 禁止使用图标库。使用带括号的文本表示图标：[icon: search]、[icon: bell]
  • 所有交互元素必须存在且视觉区分明显：按钮、输入框、下拉菜单、模态框、导航栏、空状态
  • 点击按钮/链接应跳转到正确的后续页面（屏幕间导航使用href="[页面名称].html"）
注释面板： 在每个线框图底部添加一个固定面板（样式与线框图区分开——使用黄色背景），包含以下内容：
  • 本页面的功能（一句话描述）
  • 对应PRD中的哪个用户故事
  • 哪些操作会触发页面跳转
  • 展示哪些数据、需要输入哪些数据
  • 需要处理的边缘情况或空状态
需要生成的页面： 阅读PRD中的主流程和P1级功能。为以下内容生成线框图：
  • 所有提及的独立页面
  • 所有展示列表的页面的空状态
  • 所有错误状态（表单验证、网络失败、认证错误）
  • 所有模态框或浮层
  • 3个最重要页面的移动端适配版本（在注释面板中添加说明："移动端视图——375px视口"）
索引页面： 生成wireframes/INDEX.html，包含：
  • 按用户流程组织的所有页面链接
  • 使用HTML/CSS制作的简单流程图（仅用方框和箭头，不使用外部库）
  • 解释注释面板颜色编码的图例
页面文档： 生成docs/SCREENS.md，列出： | 页面名称 | 文件 | 用途 | PRD用户故事 | 展示数据 | 输入数据 |
完成所有线框图生成后，输出： "线框图已保存至wireframes/目录。在浏览器中打开wireframes/INDEX.html进行查看。用简洁的英文描述需要修改的内容，我会进行更新。 确认无误后，运行/architect命令。"