美研芒格君 · 2026-09-14 · 帖子

果然还是高手在民间。上个帖子获得了很多干货、硬核经验和设计经验分享 谢谢大家。我主打一个听劝，就把大家推荐的工具、优质帖子和设计方法整理了一遍。希望对同样需要做网页、但不懂设计的外行朋友有所帮助, 并且附上我的投研网站的原型设计图⬇️ https://t.co/5js4rC7bqH 大致分成三类：工具类、方法论类、模型类，我给大家一并完整的整理出来 （设计师和天才们，见笑了） 1/ 工具类：用什么来做，去哪里找参考 > 设计 skills：Impeccable、taste-skill、Anthropic 的 frontend-design、baoyu-design，以及 emilkowalski/skills。Impeccable 有多位朋友推荐 直接出设计方案的工具：Claude Design、Google Stitch、Wegic、OpenDesign。有人建议让 Stitch 先做几版不同风格，选出喜欢的方向后再细调 > 找参考的网站：Pinterest、Dribbble、Inspora。先看看别人怎么排版、配色、放图片，挑自己真正喜欢的，再交给 AI 参考 >现成模板和提示词：Framer 的免费模板、Motionsites 的建站 prompt，以及 Variant 上的设计 2/ 方法论类：怎么把“好看一点”变成 AI 能执行的要求 很多朋友其实在提醒同一件事：要把自己想要的东西说具体 > 先想清楚网页给谁看。用户进来先看什么，内容怎么分类，看完之后下一步做什么。尤其是投研网页，读者能不能找到研究、看懂信息、愿意继续读，这些都需要在设计之前想好 > 先找参考，再让 AI 动手。不只扔一句“要高级感”。把喜欢的网页和截图给它，告诉它喜欢哪部分：这个站的字体、那个站的布局、另一张图的配色。也有人建议从摄影作品里找视觉 > 把风格写成一套固定规则。字体用什么、标题多大、正文多宽、间距多少、按钮什么样、动效做到什么程度，都记录下来。这就是大家提到的 Design System > 每轮改具体问题。有朋友分享，自己用 Impeccable 要反复调布局、颜色、动画，再做 critique、audit、polish，也就是挑问题、检查、润色。字体、字号、留白、间距这些细节，需要一项项看，不能指望一句“再好看点”全部改完 > 网站一个统一的表达。Jacky 的长文讲了一个完整过程：项目定位 → 风格定位 → 统一主题 → 专属视觉形象 → 开发与审查。网站想传达信任感、亲近感还是创意感，会影响后面的图片、颜色和动效选择 3/ 模型类：模型本身的能力也要考虑 Claude：评论里有不少朋友认可它的设计表现，也有人建议搭配 frontend-design 等 skill 使用 Kimi：有几位朋友直接推荐 Kimi 让不同模型和编程工具分工：比如用 ChatGPT 看截图、讨论修改方案，再交给 Claude Code、Codex 或 Cursor 实现。设计和代码实现可以分开几轮做，做出来以后再回到浏览器检查 我很清楚自己想让投研网页更有艺术感、更正规、用起来更舒服，现在要做的，就是把这些要求一点点落到具体页面上。 谢谢各位认真分享的朋友，原帖评论区还有不少具体经验，做网页的朋友可以一起翻翻