Lidessen's land
← All Skills
npx skills add lidessen/readme --skill interface-designGitHub ↗
SKILL.mdMarkdown

Interface Design

把页面做得协调、精致、好用：视觉层级、比例、排版、留白和细节要共同成立；组件、信息和操作要服务于真实任务，避免堆叠无用控件。理论和参考用于校准判断，最终取舍回到产品、真实内容和实际画面。

从真实关系开始

按任务选择深度：缺少设计方向时，从活动与价值探索语言；评审已有界面时，直接观察并比较；局部打磨时，沿用已确定的语言解决具体比例或交互问题。无需每次重新研究哲学，也不默认重做整个产品。参考品牌、目标平台和参数由当前任务提供，不能把某个项目的偏好变成通用默认。

已有设计系统时，先恢复当前采用的视觉基准、主题源码与完整场景，再使用下面的方法打磨。 本 skill 提供设计判断，不维护项目样式规范；旧研究、旧截图和探索配方不能覆盖已实施的方向。 项目的现行设计系统和适配约定由该项目维护，按当前任务读取。

用户要求新做、改版或打磨 UI 时，以视觉质感与组件取舍为主线：判断页面是否协调精致、元素是否对任务有用，再修改并复看实际页面。用户研究、AI 专项状态梳理、多方向比较等步骤按需采用，不作为每次改 UI 的前置流程。

多页面持续打磨兼有扫描工作量时，可按需用 ui-improvement 组织批次、试作与传播。本方法继续承担具体视觉与交互判断，局部制作无需额外加载； 该接合方法仍在孵化，不能把链接存在当作规模效果已验证。

理解当前任务、产品角色和矛盾：人在什么情况下想做什么，产品如何影响其理解和行动。已有页面或需求足以说明这些关系时直接沿用；不要为局部打磨展开全面用户研究。区分已确认偏好、实际观察、设计者解释与未验证假设，不把推测写成事实。

有页面时优先打开看整屏；问题涉及交互时再走相关动作，等待、打断或返回仅在会影响判断时检查。静态样板只能支持形式判断，不能证明完整体验。先找出视线或操作关系的问题，再决定是否需要改字体和间距。

保留用户已选择的方向，但限定它证明了什么：选择黑白稿不等于同意所有尺寸，更不等于接受“越少越好”的普遍哲学。

理论用于改变判断

需要理论支撑时按当前矛盾选择少量原作者、原论文或可靠机构材料。方法入口见 理论与边界，无需每次重读所有材料。新增来源标明读到了原文、节选还是摘要，不把书目当成已学过的知识。

记录原主张、情境、可迁移的判断及不可迁移的部分。哲学价值选择、经验性解释、职业准则和实现惯例分开；不是每种证据都能证明因果。理论之间有冲突时作出取舍，不把所有观点合成一串美德。

若任务主要是系统理解外部项目、文献或想法对自身方向的价值，按需使用 research-synthesis，带回可迁移关系、适用条件与未知。 本方法负责将这些判断变成具体视觉与交互表达，并在实际画面中检验；普通界面制作、 评审与打磨仍可独立完成，不以额外调研或加载相邻技能为前提。

跨领域学习见 交互、平面、建筑与广告。迁移的是关系而非外形：说明原媒介的目的与约束、要借用的关系、换到当前产品后失效的条件，以及可用什么小实验检验。建筑的空间不自动等于屏幕分栏，广告争取注意的方式也不自动适合长期工作的工具。每条规则要看它维系哪些关系、伤害哪些关系；冲突可以消解、分层或有意识地保留，不能一概用统一外观抹平。

不把大师姓名、产品品牌、情绪形容词或某种美学流派当作理由。模仿可以作为学习实验：说明在研究什么关系、什么保持不变、离开参考后能否解释选择。不能将别人的语境和整套外观直接当成本产品身份。

需要校准实际制作判断时，读 作者作品研究。从不同取向的具体作品学习，不只积累书目或同一圈层的主题；用局部对照检验自己的解释，也允许新案例推翻已有诊断。记录实际读文、看图、操作与尚未观察的区别。

形成能产生后果的立场

仅当产品方向或取舍本身还不清楚时深入这一节；已有方向下的局部 UI 打磨可以跳过。

用自己的语言回答：这个产品希望怎样对待人及其活动，什么值得保护，什么不应由产品夺走。写成简短、能进入真实冲突的立场，而非“简洁、优雅、高效”的愿望集合。

遇到冲突，说明为何一方优先、在哪些情境下会反转。例如让工作保持连续可能要求安静的背景进度，也可能要求醒目的阻塞反馈；不能把同一价值机械译成“全部淡化”。审美、愉悦、文化与身份同样可以成为立场，不把一切价值压成效率或可用性。

用一个具体决定辨别立场是否有用：它能排除哪个同样漂亮且可行的方案？反对者最有力的理由是什么？若换个口号仍得到完全相同方案，立场尚未进入设计。

从立场探索语言（需要探索新方向时）

用户选择 Apple 为设计基础，或任务明确需要 Apple 平台表达时，读 Apple 设计基底与跨平台适配。它是可选参考，不是所有产品的默认主题；其他品牌与方向同样根据任务选择。

先选择表达载体，再雕琢样式。根据对象可辨认的特征、用户当前要作的判断与操作、可用空间和输入方式，决定用文字、缩略图、列表、图表、预览或其他形式。比如附加文件时需要辨认与移除，检查时需要可读内容，对比时可能需要差异视图；同一对象在不同情境下可以换载体，但身份和返回关系应连续。不要因为已有卡片或标签就把所有对象装进去，也不因类型不同而无目的地制造外观差异。用“当前形式让人直接看懂什么、又迫使人额外做什么”检验选择；统一语言应统一关系与操作预期，不要求所有内容同形。

先研究关系，再选择词汇。设计语言至少要能解释它触及的这些关系，而不是要求每轮填表：

  • 信息怎样成为前景、背景，何时跨越两者；结构怎样帮助人保持位置。
  • 阅读、行动和回看怎样形成连续节奏；状态变化怎样被感知和理解。
  • 字体、比例、间距、形状、色彩、图标与材质感怎样互相支持，形成可辨认的气质。
  • 同一规则怎样在正常、拥挤、空态、错误和不同尺度下变化，仍保留同一种关系。

一个立场通常容纳多种视觉表达。通过有真实内容的草图或可操作样板比较仍未确定的表达，不规定每次必须三个候选。让差别触及阅读顺序、空间关系或动作节奏，不只换色。

研究可参数化的基础语言时，参考 产品语言与配方。区分稳定语义、构成关系和可调参数；品牌案例提供条件化参考，不证明受欢迎的因果。参数变化可以生成风格，不能代替布局和交互结构的设计。

若参数齐全却仍有拼装感，或已有动效却不跟手，读 雕琢感与连续性。回到具体内容与完整动作，检查光学关系、轮廓、材料和输入响应；先雕琢有说服力的实例，再提取可复用关系。不要用更多参数、噪点或回弹掩盖构成尚未成立。

涉及动态、hover、按下或异步反馈时，读 动态与反馈。同时考虑状态含义与表现力：形变、光影、弹性和编排可以塑造触感、愉悦与身份，不必全部还原为效率收益。把形态、材质与运动共同设计；即时输入回馈不能冒充任务完成。动态是语言的一部分，需要在中断、连续操作、键盘、触摸及减少动态的条件下成立。

思想可以指导形式，形式也会暴露思想的缺陷。面对不协调，不急着补例外：检查是表达不当、假设错误，还是立场需要重写。保留手艺与感知判断的空间；无法从理论唯一推出的字距、比例和色感，通过有说明的反复观察选择，不伪造科学必然性。

在表达中检验，之后才沉淀参数

评审构图、比例、组件组合或比较方向时，读 视觉评审与对照：从整屏关系定位问题，按需对照组件、场景与实际应用，并复核已确认的设计选择。源码和测量用于解释观察，不能替代画面判断；组件库与展示工具也适用。

需要弱化文字语义、把元素替换为色块，观察布局、留白与疏密时，读 元素色块抽象。采集实际 DOM/文字行边界，在干净画布上生成整体和分类视图；只有截图时先核对区域。保留原图对照，不用模糊、减色或描边冒充元素抽象，也不把色块图当作审美评分或交互验证。

评审以判断和建议为默认交付；有修改授权时直接制作和复查。保留已选方向不等于锁死布局，用户反馈缺乏重点或拼装感时，重新检查构图是否成立。独立评审有收益且环境允许时可委派，提供原始材料而非预设答案；综合分歧时作出取舍，不按票数决定，也不把冲突方案平均拼接。评审方法的来源与适用边界见 方法来源。

用代表性的完整活动检验一贯性。交互能用、美感成立、思想得到表达、用户接受是不同结论；分别提供对应证据。代码检查和对比度不能替代审美判断，截图漂亮也不能证明等待和恢复顺畅。

方向有依据后，把稳定的关系沉淀成语义规则、组件状态与 token。尺寸值属于可修订表达；不能把先拍定的值包装为哲学推论。旧参数保留为候选或历史，明确当前权威状态，避免同时存在两份“已定规范”。

交付保留清楚的链条：观察到的压力 → 选择的价值及代价 → 探索的语言 → 可见表达 → 证据与未知。可以是一份短文或样板旁的说明，不要求新增评分、审批、阶段状态机或文档体系。只研究或写 skill 时，到授权边界交付；不自动开始全产品重设计。

修改后重新打开页面，走原来的关键动作，检查视觉关系与可读性、空间连续性是否一起改善。交付直接给出核心判断、推荐方向、代价及证据，不只给报告链接；不向被评项目自动添加评分流程、检测依赖或另一套设计系统。共享 token 或组件实现由相应开发任务负责。本 skill 不绑定 Figma、浏览器框架、具体色板或某种产品哲学，工具按最便宜且真实的表达能力选择。