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
将你的发现和用户的回答整合到
## Design Context
部分：
markdown
undefined

Design Context

Design Context

Users

Users

[Who they are, their context, the job to be done]
[Who they are, their context, the job to be done]

Brand Personality

Brand Personality

[Voice, tone, 3-word personality, emotional goals]
[Voice, tone, 3-word personality, emotional goals]

Aesthetic Direction

Aesthetic Direction

[Visual tone, references, anti-references, theme]
[Visual tone, references, anti-references, theme]

Design Principles

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 principles derived from the conversation that should guide all design decisions]

将此部分写入项目根目录下的{{config_file}}。如果文件已存在，则追加或更新Design Context部分。

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