线框图

社区设计

内容优先：先输出语义化的线框（标题/正文/图片/按钮占位），确认信息架构后再谈视觉，避免一上来堆视觉。

#wireframe#layout#structure

能做什么

  • 做页面骨架先别想配色，先确认信息层级
  • 用语义化占位（标题/正文/媒体/按钮）快速对齐需求
  • 评审阶段先看结构而非视觉细节
  • 为复杂页面梳理信息架构再进入高保真

相关技能

Apple Design社区

Apple 液态玻璃设计规范：冷灰白地 + 统一面板 + 发丝分割线，玻璃只用于导航/浮层，正文黑白灰 + 一个蓝色强调。

#apple#liquid-glass#ui
claude plugin add naplesblue/apple-design-skill查看来源
Frontend Design官方

Anthropic 官方插件：写码前强制确定美学方向，规避 AI 默认套路（Inter 字体 + 紫色渐变），要求统一色彩系统。

#anthropic#frontend#aesthetic
claude plugin add anthropic/frontend-design查看来源
UI/UX Pro Max社区

62k★ 社区热门：240+ 样式、127 组字体搭配、99 条 UX 准则，自动匹配产品类型。

#ui#ux#styles
plugin marketplace 安装查看来源
Theme Factory官方

官方 skills 集合中的主题应用：把品牌色/设计系统一键应用为 CSS 变量。

#theme#brand#tokens
plugin marketplace add anthropics/skills查看来源
Canvas Design官方

官方 skills：布局型视觉设计，导出 PNG / PDF。

#layout#visual#export
plugin marketplace add anthropics/skills查看来源
Power Design社区

社区 skill：20 条数字化设计规则（可用性 / WCAG / 可读性阈值），自动应用到页面。

#rules#wcag#typography
.claude/skills查看来源