我想立刻创建出高质量的线框图。
这次我把这些提示整理成了一本指南。
教给 Claude 线框图的规则,能为你节省大量时间。
目录
- 注册为"技能"规则
- 复制粘贴提示
- 每条规则的说明
- 对于多页面网站,使用 Claude Code
注册为"技能"规则
当你粘贴提示后,Claude 会为该技能准备一个文件。注册完成后,之后你只需说"创建一个线框图"即可。
- 将下面的 "复制粘贴提示" 传给 Claude,系统会生成一个 ZIP 文件。
- 按下聊天中显示的 "保存按钮"。
这样就无需每次都粘贴提示了。
*技能功能在 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 进行网页制作和指导的省时技巧。
我会继续提供有用的信息,如果你喜欢,请关注我。





