imagegen-frontend-web

MIT设计/前端来源: https://github.com/Leonxlnx/taste-skill

网站设计参考图的生成规范。以"高端前端艺术总监"视角生成设计图:每个页面板块独立一张横图,强制构图多样化(不全是左文右图)、背景自由、CTA 多样、统一调色板。产出可直接交给编码工具照着实现。适合想先"看到"网站长什么样、再动手做的用户。需配合图像生成工具使用。

🔍 实测报告

★★★★★ 5/5 入门可用

设计参考图生成规范详尽(每板块一图+构图多样化+统一调色),产出高级感强;需配合图像生成工具。

本报告由自动化实测生成:读取技能完整内容,按描述验证可执行性与依赖。

有这个技能,差别在哪

遇到的情况	没有这个技能	有这个技能
想做网站但不知道长啥样	只能让 AI 直接写代码,做出来才知道好不好看。	AI 先生成设计参考图,你先"看到"效果,满意再实现。
AI 生成的页面很平庸	千篇一律的左文右图、默认配色。	强制构图多样化、背景自由、CTA 多样,摆脱模板感。
多个板块风格不统一	每块各搞各的,整体很乱。	全站锁定统一调色板,整体协调。

装好后,AI 会这样帮你干活

你:帮我设计一个咖啡品牌网站

AI:作为艺术总监,规划页面结构——首页、产品、关于、门店。

AI:每个板块生成一张独立设计图,构图各不相同。

AI:全站统一暖色调色板,整体协调高级 ✅

安装(超简单,一句话搞定)

不用敲任何命令。 复制下面这句话,发给你的 AI 助手(Claude Code、Reasonix、Cursor、Codex 等都行),它会自己帮你装好:

帮我安装 imagegen-frontend-web 这个技能,它来自 https://github.com/Leonxlnx/taste-skill ,装好告诉我是干什么的

你的 AI 助手可能还会问你放在哪、怎么用,照常回答它就行——就像平时让它干活一样,不用懂技术细节。

想自己动手?(不推荐,给懂命令行的人)

下面的命令按工具区分,均来自原仓库。普通用户请直接使用上面的一句话方式,让智能体代劳。

Claude CodeCodexCursorGemini CLIOpenCodeReasonix

/plugin marketplace add Leonxlnx/taste-skill
/plugin install

/plugins → 搜索 taste-skill → Install Plugin

在 Cursor Agent 聊天中输入 /add-plugin taste-skill

gemini extensions install https://github.com/Leonxlnx/taste-skill

git clone https://github.com/Leonxlnx/taste-skill.git 对应技能目录(详见原仓库 README)

用 install_source 安装 https://github.com/Leonxlnx/taste-skill(Reasonix 会引导你完成)

来源与版权

• 原作者:Leon (Leonxlnx)
• 原仓库:https://github.com/Leonxlnx/taste-skill
• 许可证:MIT(允许复制、修改、翻译、再分发,需保留版权声明)
• 仓库路径:skills/imagegen-frontend-web

← 返回全部技能