wireframe-annotated
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (①②③④⑤) in a single accent color, paired with a right-hand SPEC PANEL that lists each numbered pin with a short engineering / UX note. This is the "wireframe + redline spec" style — clean, flat, low-fidelity, NOT hand-drawn. Use when the brief asks for "annotated wireframe", "redline wireframe", "wireframe with spec", "lo-fi landing wireframe", "low fidelity", "线框图", "标注线框", or "redline".
DeepseekModel
官方收录技能
质量 优秀 · 90
v1.0.0
获取
https://deepseekmodel.com/api/download.php?id=nexu-io-open-design-design-templates-wireframe-annotated-skill-md&format=skill
下载 .skill
标准格式，含 system_prompt 与 model_config，导入任意 Agent 框架即可使用
.skill 文件中 system_prompt 字段的实际内容。
name wireframe-annotated description An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (①②③④⑤) in a single accent color, paired with a right-hand SPEC PANEL that lists each numbered pin with a short engineering / UX note. This is the "wireframe + redline spec" style — clean, flat, low-fidelity, NOT hand-drawn. Use when the brief asks for "annotated wireframe", "redline wireframe", "wireframe with spec", "lo-fi landing wireframe", "low fidelity", "线框图", "标注线框", or "redline". triggers ["annotated wireframe","redline","wireframe spec","lo-fi landing","wireframe","low fidelity","标注线框图","redline 标注"] od {"mode":"prototype","platform":"desktop","scenario":"design","fidelity":"wireframe","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":false,"sections":["color","typography","layout","components"]},"example_prompt":"Draw an annotated redline wireframe for a desktop landing page — greybox nav, hero, logo strip, 3-up feature grid and footer, numbered pins ①–⑤ and a right-hand spec panel with one engineering note per pin."} Wireframe Annotated Skill Produce a single flat, low-fidelity landing-page wireframe with a redline spec. The whole point is "structure + handoff notes, not pixels" — greyboxes carry the layout, numbered pins call out regions, and a right-hand spec panel turns each pin into a short engineering / UX note. Keep it clean and flat; never hand-drawn or scribbly. Workflow Skip finished UI. This skill explicitly wants a low-fidelity greybox look. Honor type tokens only loosely (one clean sans like Inter / system-ui for labels, one mono like IBM Plex Mono for the spec notes and pin numbers). Use medium-grey fills with defined darker borders so the page reads as a thumbnail — avoid near-white-on-white, which renders blank. Set the two-column shell. LEFT is the wireframe canvas: a browser-chrome framed greybox page. RIGHT is a narrow "ANNOTATIONS / SPEC" panel. Pick ONE accent color (coral or blue) and use it ONLY for the numbered pins and the matching spec numbers — everything else stays greyscale. Lay out the canvas , top to bottom, each block a greybox with a numbered pin absolutely positioned on it: Top nav — logo greybox + nav lorem-bars + a primary button block. Pin ①. Hero — big headline lorem bars + subhead + two CTA button blocks on the left; a large image placeholder (rect with a diagonal X) on the right. Pin ②. Logo strip — a row of 5 small greybox partner logos. Pin ③. Feature grid — 3 cards, each an icon square + title bar + 2 text bars. Pin ④. Footer — columns of lorem link-bars. Pin ⑤. Mirror every pin in the spec panel. Each spec row = the circled number in the accent color + a short mono/sans note, e.g. "① Sticky nav, 64px, condenses on scroll", "② Hero H1 48/56, CTA pair primary+ghost", "③ 5 partner logos, greyscale", "④ 3-up at ≥960px → 1-up mobile", "⑤ 4-col footer, legal row". Mark the panel and each row with data-od-id . Self-check : Every numbered pin on the canvas has exactly one matching spec row. The accent color appears ONLY on pins + spec numbers; the rest is greyscale. The page should read clearly at thumbnail size; if blocks vanish into the background, darken the fills/borders. It must NOT look pixel-perfect or hand-drawn — flat greyboxes only. Output contract Emit between <artifact> tags: <artifact identifier="wireframe-slug" type="text/html" title="Annotated Wireframe — Title"> <!doctype html> <html>...</html> </artifact> One sentence before the artifact, nothing after.
Agent 识别该技能的关键词，点击任意一个即可复制。
该技能未提供触发词。
下载的 .skill 包内含以下字段。
| 字段 | 说明 |
|---|---|
| format | 格式标识（skill/v1） |
| skill_id | 技能唯一 ID |
| name | 技能名称 |
| version | 版本号 |
| description | 技能描述 |
| category | 所属分类（数组） |
| trigger_words | 触发词列表 |
| tags | 标签列表 |
| source | 来源标识 |
| source_url | 来源链接（本页地址） |
| exported_at | 导出时间（每次下载生成） |
| system_prompt | 系统提示词正文 |
| model_config | 模型参数：provider / model / temperature / max_tokens / top_p |
| examples | 示例 |
| install_guide | 各平台导入说明（Coze / Dify / Claude / 自定义框架） |
