关于使用Claude4生成页面技巧

直接丢图片给Claude发现生成的代码运行起来跟图片差别很大。

可以使用下方提示词先将图片生成design.json，然后让其按照该design.json生成代码，效果会好很多，基本上稍微改改就可以使用。

Create a JSON-formatted design system profile. This profile should extract relevant visual
design information from the provided screenshots. The JSON output must specifically include:
The overarching design style (e.g., color palette, typography, spacing, visual hierarchy).
The structural elements and layout principles.
Any other attributes crucial for an Al to consistently replicate these design systems
Crucially, do not include the specific content or data present within the images, focusing solely

相应地我们也可以在项目根创建或生成个CLAUDE.md,固定代码规则，让Ai根据CLAUDE.md的规则生成代码。

参考资料

• claude-code-best-practices