线框图提示词 [复制粘贴] | 教会 Claude “规则”的操作指南

@hiroho150cm
日语4周前 · 2026年6月20日
137K
777
40
1
1.8K

TL;DR

本指南提供了一个专门的提示词,用于教导 Claude 掌握特定的设计、布局和写作规则。通过将这些规则注册为“技能”,用户可以实现高质量、极简风格 HTML 线框图的自动化创建。

我想立刻创建出高质量的线框图。

这次我把这些提示整理成了一本指南。

教给 Claude 线框图的规则,能为你节省大量时间。

目录

  1. 注册为"技能"规则
  2. 复制粘贴提示
  3. 每条规则的说明
  4. 对于多页面网站,使用 Claude Code

注册为"技能"规则

当你粘贴提示后,Claude 会为该技能准备一个文件。注册完成后,之后你只需说"创建一个线框图"即可。

  1. 将下面的 "复制粘贴提示" 传给 Claude,系统会生成一个 ZIP 文件。
  2. 按下聊天中显示的 "保存按钮"

这样就无需每次都粘贴提示了。

*技能功能在 Pro 和 Max 等付费计划中可用。

复制粘贴提示

将以下内容粘贴到 Claude 聊天中,开始 技能注册(注册为规则以便记忆)

只需按照聊天指示操作,然后按下 ✔️ 保存按钮

以下是一个线框图提示。请将其转化为一个技能。

用 HTML 创建一个线框图。 请遵守以下所有规则。

[布局] ・创建一个一目了然、阅读起来没有负担的布局。 ・打造一个精致、都市化且极简的布局。 ・充分利用整个页面来安排边距和平衡。 ・字体使用 Noto Sans JP,并使其略微偏小。

[设计] ・颜色仅使用"白色、黑色和灰色"。 ・背景基本保持白色。不要创建全黑的页面。 ・不要使用任何不必要的英文、线条、阴影或其他装饰。 ・在需要图表或图像的地方使用灰色框。 ・图标使用"Font Awesome"的免费版本。

[文案] ・每个句子保持简短。每个句子至少使用一次逗号。 ・每 1-2 个句子后换段。 ・在感觉自然的地方将汉字改为平假名(例如,将"行う"改为"おこなう")。 ・对于想强调的名称或对话,使用括号「」。 ・修正任何错别字或遗漏字符,并将语气统一为礼貌体(です/ます)。

每条规则的说明

供想了解规则细节的人参考。

1. 布局与设计

"一目了然的布局"能组织好信息的优先级。通过将颜色限制为"白色、黑色和灰色",设计就不会失控。

https://x.com/hiroho150cm/status/2061576024878633393

2. 图标

为图标指定"Font Awesome"能显著提升外观。

https://x.com/hiroho150cm/status/2062376294688387540

3. 使用 HTML 创建

使用 HTML 可以使生成和修改变得顺畅。

https://x.com/hiroho150cm/status/2061938409577574818

https://x.com/hiroho150cm/status/2064112737865576597

4. 文案

可读性会变得非常高,以至于你可以直接使用内部文本。

https://x.com/hiroho150cm/status/2063750350776287429

对于多页面网站,使用 Claude Code

到目前为止,以上内容都是关于落地页(单页面)的。对于多页面网站,我们需要改变方法。

聊天预览不擅长在多个 HTML 文件之间切换。因此,我们使用"Claude Code"。

在桌面上准备一个文件夹,并在其中管理所有内容。这样,Claude Code 就能正确地编辑多个 HTML 文件。

https://x.com/hiroho150cm/status/2065267853922898022

我分享使用 Claude 进行网页制作和指导的省时技巧。

我会继续提供有用的信息,如果你喜欢,请关注我。

二次创作

使用 YouMind 创作爆款文章

收集素材、拆解爆点、生成视觉资产、撰写内容,并在一个 AI 工作空间里完成分发。

了解 YouMind
写给创作者

把你的 Markdown 变成干净的 𝕏 文章

图片上传、表格、代码块,往 𝕏 上手动重排太痛苦。YouMind 把整篇 Markdown 一键转成干净、可直接发布的 𝕏 文章草稿。

试试 Markdown 转 𝕏

更多可拆解样本

近期爆款文章

探索更多爆款文章