yuanlang12/openpipal/hi-fi-design

Claude Code and agent skill by yuanlang12/openpipal

Trust tier 2
  • community
LLM review pending
Source check pending

Checking that the SKILL.md file is still in the repository.

高保真界面稿的精修法——动手前把用户给的品牌资料、参考图、设计系统读完（凭空造是最后手段），然后在画板模式里并排给多个方向，并规定方向怎么编号、怎么摆、用户怎么用编号回指、新一轮加在哪。判据：taskType=界面稿（UI mockups），或任何"先给我几个方向看看"「把这一版做精」的高保真任务，写第一行前必读。地基是 dc-authoring 的画板模式那节（这份只讲它之上的编排纪律，不重复格式）。上游是 wireframe：低保真广度探索选定结构后转到这里升保真。

Install

npx vskill@latest install yuanlang12/openpipal/hi-fi-design

SKILL.md

高保真界面稿（hi-fi design）

这份技能管两件事：动手前怎么拿到设计上下文，和多个方向在画板上怎么编排。 文件格式、画板模式的形状约束、字体口径全在 dc-authoring，那份是地基——这里只写它之上的东西。

1. 动手前：设计上下文优先

高保真稿不从零开始。凭空造出来的"完整产品"就是训练集默认审美（粉紫渐变、emoji badge、 过大圆角），用户一眼认得出。所以第一步不是写 HTML，是把上下文收齐：

  • 本会话简报里的资产全部 `read` 进来：用户上传的品牌资料、参考截图、现有设计稿、选中的设计系统。

设计系统先读它自己的 SKILL.md——它的 token 与禁令优先于你的审美偏好。

  • 设计系统的 token 声明块原样拷进 helmet 的 `:root`，正文一律 `var(--token)` 引用

（细则见 dc-authoring 的 helmet 一节）。手抄成色值字面量 = 断链，用户换主题不再联动。

  • 缺关键信息就问，不要猜：主色、字体、参考样本、目标设备。视觉类问题给色块/几何预览让用户点选，

别让用户读文字脑补。需要用户传原件时，把上传位挂在对应那道题下面。

  • 严格会话隔离：只认本次会话给的资产，不去翻别的目录找历史文件——别的会话的东西读进来就是污染。
  • 没有某个图标/素材/真实图片时画占位符。高保真稿里，一个诚实的矩形占位符好过一个拙劣的仿制品；

凭空用 SVG 画产品截图、人物、插画一定难看。用户随消息发的图走 uploads/ 相对路径（见 dc-authoring）。

收齐之后、写 HTML 之前，先用文字把你要用的系统讲一遍：几色、哪个是 accent、标题与正文各用什么字体、 间距基准、圆角刻度、阴影风格。让用户先认可系统再进代码，这是防返工最便宜的一步。

2. 骨架：一份能直接跑的多方向画板稿

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
  <meta name="design_doc_mode" content="canvas">
  <style>
    *{ box-sizing:border-box }
    html,body{ margin:0 }
  </style>
</helmet>
 
<!-- 第 1 轮 · 方向 1A -->
<div style="position:absolute; left:80px; top:96px; width:1280px">
  <div style="font:600 12px/1 'SF Mono','Cascadia Code',ui-monospace,monospace; letter-spacing:.08em; color:#7d766a; margin-bottom:12px">1A · 克制中性</div>
  <div data-screen-label="1A 克制中性" style="background:#fdfcfa; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.09); overflow:hidden; padding:56px 64px">
    <h1 style="font:600 44px/1.12 Optima,'Avenir Next',-apple-system,'PingFang SC',system-ui; color:#1b1a17; margin:0 0 16px">标题</h1>
    <p style="font:400 16px/1.7 -apple-system,'PingFang SC',system-ui; color:#6b665e; margin:0; max-width:52ch">正文……</p>
  </div>
</div>
 
<!-- 第 1 轮 · 方向 1B -->
<div style="position:absolute; left:1520px; top:96px; width:1280px">
  <div style="font:600 12px/1 'SF Mono','Cascadia Code',ui-monospace,monospace; letter-spacing:.08em; color:#7d766a; margin-bottom:12px">1B · 高对比编辑感</div>
  <div data-screen-label="1B 高对比编辑感" style="background:#12110f; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.09); overflow:hidden; padding:56px 64px">…</div>
</div>
 
<!-- 第 1 轮 · 方向 1C -->
<div style="position:absolute; left:2960px; top:96px; width:1280px">…</div>
</x-dc>
</body>
</html>

坐标算法：left = 80 + i × (帧宽 + 160)，同一轮共用一个 top。上面这份是帧宽 1280、间距 160。

3. 编号与摆放（本技能的核心规范）

3.1 编号

`{轮次数字}{大写字母}`：第一轮是 1A 1B 1C，第二轮是 2A 2B。 编号一旦发出去就永久稳定：不重排、不复用、不重编号、不删除旧轮。用户随时可能回头说"回到 1B"。

编号必须同时出现在两处，缺一处就有链路失灵：

位置写法谁在读
帧上方的可见小标签1A · 克制中性用户的眼睛（他照着这个在聊天里打字）
data-screen-labeldata-screen-label="1A 克制中性"文本摘要、自检逐屏核对、交接包逐帧截图与文件名

两处的编号与名字保持一致——用户说的和你摘要里看到的必须是同一个词。

3.2 用户怎么回指

用户在聊天里直接打编号（"1B 的排版配 1C 的字体"）。你在回复里也直接写 1B。

不要建 `#编号` 锚点互链：预览是无 <base> 的 srcdoc 沙箱，href="#1b" 会解析到宿主页面地址上， 点了既不滚动也不高亮（详见 §5）。编号的职责是说的时候指得准，不是点的时候跳得过去。

3.3 新一轮加在哪

画板上所有帧都是绝对定位，新一轮向下另起一行，旧轮的 left / top 一个字都不改：

top: 96      ← 第 1 轮：1A 1B 1C 横向排开
top: 96 + 第1轮最高帧高度 + 160   ← 第 2 轮：2A 2B
  • 不要把新轮插到最前面。旧轮全是绝对坐标，"置顶"意味着重算每一帧的 top——

用户正在看的东西当场全部跳位；而且逐帧截图是按 DOM 顺序编号（frame001…）落到交接包 reference/ 里的， 重排会让上一版交接包的对账全部错位。

  • 加新一轮用 edit_artifact 在 </x-dc> 前插一段，不要重发全文（见 dc-authoring 的修订纪律）。
  • 每轮末尾可以加一行纯文本的跟进建议（"下一步可以说：把 2A 的间距收紧 / 让 2B 满幅"），

是文字不是链接。

4. 方向之间要差多少

维度表在 dc-authoring 的画板模式那节，这里只加两条 hi-fi 专属的：

  • 梯度铺开：一个贴用户已知审美（安全）、一个中间态、一个更大胆。三个都保守 = 用户没得选；

三个都激进 = 用户不敢选。

  • 至少跨两个维度。三个方向只换了主色不算三个方向，那是一个方向的三次调色。

拿到品牌资产之后，"大胆"的正确形状是把已有的视觉 DNA 重混——玩比例、留白、质感、版式节奏、 字体处理——而不是换一套无关的审美。

5. 运行时与宿主已经替你做了什么

<meta name="design_doc_mode" content="canvas"> 一写进 helmet，下面这些自动发生，别自己实现：

  • 画布底色与高度：运行时给根元素挂 sc-dc-canvas，铺中性偏暖的工作台灰底，

并给挂载点至少一屏的画布高度（绝对定位的帧撑不起父级，没有这一步整块会塌成 0 高）。 所以不要自己写画布背景、滚动容器、居中逻辑——你写的 body 背景只会盖住板面那一块， 往右滚出去仍是运行时的灰底。

  • 缩放归宿主：产物一上场宿主就自动适配，工具条上出现「适配 / − / 百分比 / +」四个控件。

容器尺寸变化时自动重新适配；用户手动 ± 之后转手动档，不再自动重算，直到他点「适配」。

  • 适配是两档的，这条直接决定你的帧该多宽：整板缩放不低于 0.4 就整板适配；

低于 0.4 说明并排太宽、字已经看不清，宿主改成单帧适配——按最宽的那个绝对定位直接子元素算， 左右各留 80px，下限 0.25。推论：单帧宽度才是可读性的决定量，帧宽压在 1280–1440 之间， 帧数多就让画板往右长，别把单帧做到 2000px 以上。

  • 没有拖拽平移。 宿主接管的只有缩放，平移只有滚动条。不要在稿子里写"拖动画布查看"这类说明，

也不要自己搓平移控件。

  • 其余（内联样式即写即画、伪态类生成、热更新保状态、uploads/ 图片内联、半截标记容错）

在 dc-authoring 的"运行时已经替你做了什么"一节，不重复。

6. 约束与静默失败（不知道就会踩，踩了不报错）

  1. `#锚点` 与 `:target` 在预览里不通。 预览 iframe 是 sandbox="allow-scripts …"（无同源许可）的

srcdoc 文档，全仓不注入 <base>，而 srcdoc 的 baseURI 继承宿主页面地址。实测结果：点 href="#1b" → iframe 不滚动、#1b:target 不命中、片段落到宿主文档的 URL 上。这套互链在这里是死的，别建。

  1. 所有 `left` / `top` 必须 ≥ 0。 逐帧截图的裁剪框把 x/y 钳到 0，负坐标那一侧连同对应宽度

直接被裁掉——预览里看着好好的，导出的交接包里少半张。

  1. 漏写 `data-screen-label` = 三条链路同时退化：文本摘要从"逐屏一条"退成"整页一条"、

自检没法逐方向核对文案、交接包从"逐帧截图"退成"整页一张"（文件名退成猜出来的最大字号标题或 screen-N）。 一个方向一个标签，不多不少。

  1. 标签打在哪个元素上，就截哪个元素的包围盒。 打在展示卡上，卡片上方那行编号标签不会进截图；

想让编号一起进交接包就打在最外层的绝对定位帧上。选一种并保持一致。

  1. 上限 60 帧：文本摘要和逐帧截图都封顶 60，超出的帧不进摘要也不进交接包。
  2. 自检截图只有一屏。 自检在 1280×900 的隐藏窗口里截视口，没有宿主缩放——

画板超出这一屏的部分不在截图里。多方向稿的自检以逐屏文本摘要为准， 别因为截图只看到第一个方向就以为其余没渲染出来。

  1. 文本重叠检测会拦你：两段文本的包围盒相交超过对方面积的 25% 就报错并要求修完再交。

背景不透明度超过 0.9 的元素被豁免（徽章压卡片是合法设计），所以刻意压在图上的标签 要么给它不透明底，要么错开。

  1. 正文只用内联 `style`，不要建 class 体系。 .card、.opt 这类 class 配 helmet <style>

在这里是反模式：内联样式才即写即画、才能被用户在预览里直接就地编辑改回源码。 helmet 的 <style> 只放 @font-face / @keyframes / reset / :root token。

  1. 一份产物只写一个 `<x-dc>`，所有帧都在它里面。写到 </x-dc> 外面的内容浏览器照样画出来，

看着像成了，但空穴和事件全死。

  1. PPTX 导出对画板稿不可用（那条链路只认幻灯片舞台）。画板稿的成品出口是交接包、图片与 PDF。
  2. 字体走系统字体栈，不要在 helmet 里 <link> 外部字体服务：那类域名在部分地区不通、

<link> 是阻塞式的、而且导出链路不内联网络字体，用户拿到的离线单页会整篇落回替身。 真要特定字体就把字体数据以 data: URI 内联进 helmet（口径与细则见 dc-authoring 的字体一节）。

7. 纪律

  • Directions 稿是静态版式：三个方向对比的是版式与视觉语言，不写逻辑块、不做交互。

用户拍板后新开一个产物把胜出方向深化成完整交互稿，落选方向里好的部件拆件吸收， 吸收处留一行注释痕（<!-- 趋势图（来自 1B） -->）。

  • 深化稿默认带 2–3 个调参参数（配色轴 / 信息密度 / 布局这类一键联动的维度），宿主自动渲染面板。

单句文案和单个颜色用户能就地改，别为它们建参数。

  • 迭代一律先想 `edit_artifact`：改文案、换色、调间距、插新一轮，都用精确字符串替换。

只有整体换方向的结构性重写才同 id 重发全文。绝不为了塞新内容删掉已有方向。

  • 间距守 8px 系统（8/16/24/32），绝对定位元素彼此至少 16px，帧与帧之间 ~160px。
  • 给关键可编辑元素写 `id`，并避免同一句短文案在文件里重复出现——就地编辑靠"源码里唯一"定位，

不唯一就退化成一次模型往返改写，慢且可能改偏。

  • 图标用 Unicode 字形（◎ ⊞ ⇉ ◈ ⚐ ▤ ▲ ●）配字号与颜色，不要写内联 SVG 字符串——

一个 SVG 图标约等于 40 个字形的预算，多方向稿最容易在这里被截断。

  • 文字尺寸底线：正文别低于 14px，移动端点击区不小于 44×44。

8. 交付前自检

通用自检流程（render_artifact、告警对照表、怎么读控制台）在 dc-authoring 那一节，照跑。 画板稿额外核这四条：

  1. 逐屏文本摘要按方向名对一遍——每个方向一条、编号与名字对得上、文案/品牌名/数据没写错。

摘要只有一条整页的 = data-screen-label 漏了。

  1. 所有 `left` / `top` 非负，帧之间不相交。
  2. 数一下帧数与你打算给的方向数一致（少了通常是帧被包进了 wrapper，宿主量不到）。
  3. 编号连续且未重排：旧轮编号与上一版逐字一致。

Security

  • Security scanPassed, 96 of 100Pattern checks on the skill's files.
  • Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/yuanlang12/openpipal/hi-fi-design/badge)](https://verified-skill.com/skills/yuanlang12/openpipal/hi-fi-design)

Something wrong with this skill or its page? Tell us.