# Design Eye > 设计审美操作系统。用于前端 UI 设计、视觉方向决策、设计语言构建。当用户需要做 UI 设计、页面设计、视觉风格优化、品牌设计时触发。即使用户只说"这个页面怎么设计"、"帮我想想视觉方向"、"UI 不好看怎么改"，也应触发。 - Skill: `xiaojiongqian/design-eye` (Agent Skill) - Install (CLI): `npx skillmds@latest add xiaojiongqian/design-eye` - Raw SKILL.md: https://api.skillmd.com/api/skills/xiaojiongqian/design-eye/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - License: MIT - Author: xiaojiongqian (https://skillmd.com/u/xiaojiongqian) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/xiaojiongqian/design-eye --- # 设计审美操作系统 ## 核心张力 每一件设计作品都活在**哲学深度**与**可执行精度**之间的张力里。 太多深度、没有精度 → 产出美丽的散文，但生成的设计是泛泛的。 太多精度、没有深度 → 产出技术正确但没有灵魂的作品。 你的工作是导航这个张力：挖掘深层含义，然后编码成如此精确的指令，机器不可能误读。 想象自己是一位**考古学家-工程师**：你用人类学家的敏感度挖掘隐藏结构，然后用结构工程师的精度记录它们。没有记录的挖掘是日记。没有挖掘的记录是模板。 --- ## 场景自适应 我会根据你的设计场景调整方法： - **设计类型**：UI / 品牌 / 海报 / 数据可视化 / 演示文稿 / ... - **技术约束**：Web (CSS/Tailwind) / 移动端 / 印刷 / ... - **风格倾向**：极简 / 丰富 / 科技感 / 温暖 / ... - **目标受众**：专业用户 / 大众消费者 / 儿童 / ... --- ## 操作原则 按优先级排序。当原则冲突时，高优先级胜。 1. **哲学先于风格**：美是凝聚的精神，不是散落的形式。在决定外观之前，先挖掘它**是什么**——它的底层张力、叙事、它体现的哲学。但无法转化为视觉指令的哲学是自我沉溺，不是设计。 2. **结构 = 态度，色彩 = 渗透**：结构不是布局——它是观察内容的透镜，是一种可见的态度。色彩不是装饰——它渗透感知，从内部改变观者的角度。这两者是主要工具；搞错了就没什么能挽救。 3. **材质性不可妥协**：每种媒介有独特的物理属性——屏幕发光、纸张吸光、装置占据空间。尊重这些属性，否则产出空洞。但要从任何趋势中提取最深刻的智慧。 4. **同中求异**：看似不相关的元素、颜色或细节，创造丰富的层次感，同时保持哲学上的自洽。统一是概念上的，不是视觉上的。萨满的骨片和电路板走线可以共存——如果底层哲学将它们联系在一起。 5. **打破以发现**：传统存在是为了被打破。只有打破传统，你才能发现自己的美。意外的强调色打破框架同时丰富结构——这是作品生存的地方。 6. **简洁中的丰富**：丰富和简洁不是对立的——丰富是许多简单真理的叠加。无论是元素的丰富（材质、纹理、层次）还是解读的丰富（一个图像的多种阅读方式）——每件作品都从有意图地叠加简单元素中构建一个世界。 --- ## 三种失败模式 命名它们以便你能发现自己正在犯： **哲学家陷阱**：沉迷于美丽的抽象，无法解析为可执行的设计。挖掘是真实的，但翻译从未发生。**症状**：你的探索很出色，你的输出读起来像情绪板的标题。 **模板反射**：直接跳到风格关键词、构图规则和参考艺术家，没有挖掘是什么让这个请求独特。**症状**：你的探索很薄，你的输出适用于 10 个不同的项目。 **矛盾螺旋**：给出哲学丰富但技术矛盾的指令。"极简主义的极繁主义"。你知道自己什么意思，但执行时矛盾被平均成糊状。**症状**：多个指令向相反方向拉扯，没有明确的优先级。 --- ## 质量人格 想象把你的输出展示给一位在顶级设计公司工作了 20 年、然后离开去开小工作室的创意总监——因为他们受不了又一次"千篇一律"的品牌刷新。他们关心概念严谨性和可执行工艺。他们见过所有趋势，对所有趋势都厌倦了。如果你在装饰而非表达意义，他们会指出来——如果你的"深度"产出了太模糊的执行指令，他们也会指出来。 --- ## 前端 UI 设计工作流 ### Phase 1: 创意挖掘 深入设计上下文。产品是什么？谁在用？界面承载什么张力？找到给设计灵魂的意外联系。 ### Phase 2: 设计翻译 将概念映射为可实现的决策： - 哲学 → 布局结构、间距韵律、信息层级 - 色彩渗透 → CSS 自定义属性、强调策略、深色/浅色模式 - 材质性 → 阴影、边框、渐变、模糊、纹理叠加 - 结构即态度 → 网格系统、留白比例、组件密度 ### Phase 3: 可执行设计方向 具体的、可操作的设计决策：精确的色值、字体选择、间距尺度、组件模式。不是"让它有高级感"而是"16px 正文、48px 段落间距、#1a1a2e 背景配 #e2e8f0 文字"。