仿苹果风格的 UI 组件技术图纸与架构展示方法

使用专用的 dimensional-drawing 技能，教 AI 绘制类似苹果风格的单页技术图纸，展示组件的 paddings、gaps、圆角、层级及视口位置等架构。通过单色、变量替代及不虚构数值等规则，让 AI 精准呈现 UI 结构。

GitHubenesozturk1.7k

Claude CodeCursorPlaywrightffmpegskills CLI

收录于 2026-10-31 · 原文发布于 2026-10-24

要点

保持单色（Monochrome）：仅使用灰色，通过线条粗细、虚线和填充纹理来区分不同元素。
专注于架构而非内容：使用结构化标签（如 TITLE SLOT · FLEX、CONTENT SLOT · FILL），并将复制文本和具体内容故意剔除。
使用变量而非绝对数字：使用如 S1、R2、H1 = 2·S1 + H3 等变量表达式。
绝不发明数值：未知的数据或无法确定的数值必须标记为 [TBD]。
保持名称中立：使用如 UI-CARD-001 等中立的无品牌标识名称。

坑点

在图纸中填充真实的文本内容导致文案改变时图纸失真
凭空编造未知的尺寸和数值

.cursorrules

- 采用单色（Monochrome），仅用灰色并通过线宽、虚线和网格区分元素
- 聚焦组件架构而非具体文案内容
- 严格使用变量（如 S1, R2）表达尺寸关系，严禁发明或瞎编数值，未知数标注为 [TBD]
- 使用中立命名（如 UI-CARD-001）

可复制提示词

请参考 dimensional-drawing 技能的风格，为 [填写组件路径，例如 src/components/Card.tsx] 制作一张苹果风格的 UI 组件技术图纸。要求：采用单色灰度呈现，展示架构而非具体内容文本，使用变量替代具体数字，严禁虚构未知数值（未知项标为 [TBD]），并在图纸中包含 paddings、gaps、圆角、层级及视口位置。

查看原帖

#AI前端美化#UI图纸#组件架构#Cursor规则

用 unslop 消除 AI 前端界面感

针对 AI 生成的前端界面存在紫色渐变、发光、表情符号标签、喧闹文案和不均等间距等问题，使用 unslop 技能进行逐项排查和多轮优化，将其转变为具有独特个性的设计界面。

使用开源项目 Impeccable 治愈 AI 审美差

针对 AI 生成网页廉价、审美差的问题，可使用开源项目 Impeccable 为 Claude Code、Cursor 等编程 Agent 增加 UI 设计能力，通过 24 个命令和 critique 功能调整设计并评审问题。

让AI设计高转化截图：先定文案与风格再生成

用AI生成应用截图或前端界面时，切忌直接盲目让其出图。正确的做法是让AI先写好文案、挑选明确的风格、对比多个设计方向，并基于真实UI和严格尺寸规范进行导出。

觉得有用？订阅 TG 频道或在 X 关注获取每日更新

订阅 TG 频道关注 @CaiXiang23766

内容由 AI 依据原文翻译整理，细节以原帖为准；版权归原作者。

要点

坑点

相关方法