القائمة
当你需要为 UI 生成编写设计优先、规格驱动、可快速略读的提示词时使用。涵盖提示词结构、约束、变体、排版/间距规则，以及产出一致 UI 的迭代工作流程。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | design-first-ui-prompting |
| description | 当你需要为 UI 生成编写设计优先、规格驱动、可快速略读的提示词时使用。涵盖提示词结构、约束、变体、排版/间距规则，以及产出一致 UI 的迭代工作流程。 |
本技能面向设计优先的提示词：把模糊的想法变成一份紧凑的规格，从而产出一致的 UI。
像写设计系统那样写提示词，而不是许愿。
使用这个骨架，然后填空。
GOAL
- What are we making? (e.g., landing page hero / onboarding / dashboard / carousel slide)
- Who is it for? (persona)
- What’s the success criteria? (clarity, conversion, vibe)
FORMAT
- Size/aspect: (e.g., 1080x1350)
- Safe margins: (e.g., 90px)
LAYOUT (wireframe in words)
- Grid: (e.g., Swiss 6-col)
- Placement: (e.g., type-left / image-right)
- Hierarchy: H1 → subhead → body → CTA
TYPE SYSTEM
- Font vibe: (e.g., Söhne / Neue Haas / SF Pro)
- Weights: (H1 700, body 400)
- Leading: (tight for H1, readable for body)
- Tracking: (micro labels wider)
COLOR + MATERIAL
- Background: (hex or description)
- Text: (white/ivory/charcoal)
- One accent only: (cyan/lime/purple)
- Texture: (subtle grain, no plastic HDR)
IMAGERY / UI STYLE
- UI style: (minimal / glass / editorial / playful 3D)
- If photo: lighting + crop + texture rules
- If 3D: materials + lighting + softness
COPY (render EXACTLY)
- Line 1:
- Line 2:
- ...
CONSTRAINTS (change 1–2 things only)
- FONT: ___
- STYLE: ___
- MODE: ___
NEGATIVE PROMPT
- No logos, no watermarks
- No extra text beyond provided lines
- No gibberish typography
如果模型一直拼错字：
当你想让模型服从某个风格时：
示例：
Constraints
FONT CANELA
STYLE MINIMAL
MODE DARK
不要指望模型去"记住"审美。
refs/...审计工作、用具体证据核验声明，并用五年级生也能懂的简单语言解释结果。当用户要求 review、审计、检查、核验、解释一处改动、解释一处修复、总结测试结果、验证某个东西是否有效，或把技术性发现翻译成给非技术读者看的大白话时使用。
当用户想为任何页面撰写、重写或改进营销文案时使用——包括首页、落地页、定价页、功能页、关于页或产品页。也在用户说"write copy for""improve this copy""rewrite this page""marketing copy""headline help""CTA copy""value proposition""tagline""subheadline""hero section copy""above the fold""this copy is weak""make this more compelling"或"help me describe my product"时使用。只要有人在处理需要说服或转化的网站文本，就用它。邮件文案见 email-sequence；弹窗文案见 popup-cro；编辑已有文案见 copy-editing。
仅起草的 Gmail 客户支持分诊，并为每封草稿创建对应的 Codex 项目线程。当用户要求运行客户邮件自动化、检查未读/最近的支持邮件、准备 Gmail 草稿回复、对客户/个人邮件分诊同时跳过自动化邮件，或为已起草邮件的跟进创建 agent/项目线程时使用。
对照适用的操作手册、草稿安全、证据、改动（mutation）和提交范围要求，核验客户支持工作。在每次 Gmail/客户支持分诊、账单/取消/退款/账户/访问权限调查、支持交接或草稿复核任务之后、给出最终回复之前使用；也在用户要求对照操作手册、清单、skill 或要求来核验支持工作时使用。
创建一份周期性的每日 UI 灵感采集。当用户要求运行、刷新、打包或校验带日期的 UI 灵感集时使用，尤其针对 `articles/YYYY-MM-DD-ui-inspiration-capture/` 产物、Framer/Dribbble 落地页灵感、动效研究截图/视频、AI-builder 提示词、重复检查，或把项目操作手册转成可重复的工作流程。
使用本地语音配置，从脚本或内联文本生成 ElevenLabs 文本转语音音频。当用户要 ElevenLabs、text-to-speech、TTS、旁白、配音、语音音频或语音生成时使用；语音名称、voice id、邮箱、所有者和账户特定默认值只从 skill 之外的本地配置载入。