Back to Details

teach-impeccable

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Gather design context for this project, then persist it for all future sessions.
收集当前项目的设计上下文，并将其持久化保存，供后续所有会话使用。

Step 1: Explore the Codebase

步骤1：探索代码库

Before asking questions, thoroughly scan the project to discover what you can:
  • README and docs: Project purpose, target audience, any stated goals
  • Package.json / config files: Tech stack, dependencies, existing design libraries
  • Existing components: Current design patterns, spacing, typography in use
  • Brand assets: Logos, favicons, color values already defined
  • Design tokens / CSS variables: Existing color palettes, font stacks, spacing scales
  • Any style guides or brand documentation
Note what you've learned and what remains unclear.
在提出问题前，全面扫描项目以发掘以下信息：
  • README及文档：项目用途、目标受众、已明确的目标
  • Package.json / 配置文件：技术栈、依赖项、已有的设计库
  • 现有组件：当前使用的设计模式、间距规则、排版样式
  • 品牌资产：已定义的标志、网站图标、色彩值
  • 设计令牌 / CSS变量：已有的调色板、字体栈、间距比例
  • 任何风格指南或品牌文档
记录你已了解的内容以及仍不明确的点。

Step 2: Ask UX-Focused Questions

步骤2：提出聚焦UX的问题

{{ask_instruction}} Focus only on what you couldn't infer from the codebase:
{{ask_instruction}} 仅针对你无法从代码库探索中推断出的内容提问：

Users & Purpose

用户与用途

  • Who uses this? What's their context when using it?
  • What job are they trying to get done?
  • What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.)
  • 产品的使用者是谁？他们使用产品时的场景是什么？
  • 他们希望通过产品完成什么任务？
  • 界面应传递何种情绪？（如自信、愉悦、平静、紧迫感等）

Brand & Personality

品牌与调性

  • How would you describe the brand personality in 3 words?
  • Any reference sites or apps that capture the right feel? What specifically about them?
  • What should this explicitly NOT look like? Any anti-references?
  • 用3个词描述品牌调性？
  • 是否有符合预期风格的参考网站或应用？具体哪些方面符合？
  • 明确需要避免的风格？是否有反面参考案例？

Aesthetic Preferences

审美偏好

  • Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.)
  • Light mode, dark mode, or both?
  • Any colors that must be used or avoided?
  • 对视觉风格有明确偏好吗？（如极简、大胆、优雅、活泼、科技感、自然风等）
  • 仅浅色模式、仅深色模式，还是两者都支持？
  • 必须使用或需要避免的颜色？

Accessibility & Inclusion

无障碍与包容性

  • Specific accessibility requirements? (WCAG level, known user needs)
  • Considerations for reduced motion, color blindness, or other accommodations?
Skip questions where the answer is already clear from the codebase exploration.
  • 具体的无障碍要求？（如WCAG级别、已知的用户需求）
  • 是否需要考虑减少动画、色盲适配或其他特殊需求？
如果某个问题的答案已从代码库探索中明确，则跳过该问题。

Step 3: Write Design Context

步骤3：撰写设计上下文

Synthesize your findings and the user's answers into a 
## Design Context
section:
markdown
undefined
将你的发现和用户的回答整合为
## 设计上下文
章节：
markdown
undefined

Design Context

设计上下文

Users

用户

[Who they are, their context, the job to be done]
[用户群体、使用场景、待完成任务]

Brand Personality

品牌调性

[Voice, tone, 3-word personality, emotional goals]
[品牌语气、3词调性描述、情绪目标]

Aesthetic Direction

审美方向

[Visual tone, references, anti-references, theme]
[视觉风格、参考案例、反面参考、主题模式]

Design Principles

设计原则

[3-5 principles derived from the conversation that should guide all design decisions]

Write this section to {{config_file}} in the project root. If the file exists, append or update the Design Context section.

Confirm completion and summarize the key design principles that will now guide all future work.
[从对话中提炼的3-5条原则，将指导所有设计决策]

将该章节写入项目根目录下的{{config_file}}文件中。若文件已存在，则追加或更新设计上下文章节。

确认完成，并总结将指导后续所有工作的关键设计原则。