[ DESIGN-HTML SKILL · TENSION MODE ]

SKILL VS PLUGIN

同一个需求,两种哲学。Plugin 是常驻的审美滤镜,Skill 是按需的工程团队。 这是用 design-html 生成的张力版——底层 Pretext 计算布局,表面极致视觉冲击。

Pretext-Native Resize-Aware ContentEditable
01 / THE DIFFERENCE

Plugin 像空气,
你呼吸的时候
它就在。

每次打开 Claude Code,frontend-design 的 42 行美学宣言已经注入系统提示。 你做任何前端相关的事——调 CSS、写组件、生成页面——都会自动受影响。 代价:每次会话额外烧 52 token,即使你没让它干活。

常驻 52TOK EN
02 / THE WORKFLOW

Skill 像核弹,
你不按下按钮,
它不响。

输入 /design-html 才触发。然后启动完整流水线:检测上下文 → 分析设计 → 选择 Pretext API → 生成代码 → 预览验证。触发时一次性烧 760 token, 但平时零开销。输出是工程级的——文本真实重排,高度自适应计算。

按需 760TOK EN
03 / THE DUEL
Skill · 按需触发
工程队

你走流程,它出结果。Pretext 计算布局,文本真实重排,contenteditable 自适应。

  • 52KB 完整工作流
  • Pretext 计算布局引擎
  • 文本真实重排
  • ResizeObserver 响应式
  • 零常驻开销
Plugin · 常驻加载
滤镜

它一直在,潜移默化。大胆字体、非对称构图、避免 AI slop。

  • 42 行美学宣言
  • 每次会话自动注入
  • 影响所有前端对话
  • 纯 CSS 输出
  • +52 token 常驻成本
[ TRY EDITING BELOW · PRETEXT RELAYOUT ]
这是 design-html 的张力版。 底层 Pretext 计算布局, 点击这段文字直接编辑, 容器高度会自动重算。