11｜基础组件（下）：前端 UI 设计与前端基础组件

Robert

你好，我是 Robert。
上一讲把后端基础组件全部搭完了，三档就绪。这一讲搭前端。
09 讲搭了前端空壳，包括 Vue 骨架、axios 封装、三个菜单页面的占位文字。能跑，但说实话，看起来就是 Element Plus 的默认灰蓝，像一个课程作业，不像一个产品。
这一讲做两件事：
让 Claude Code 当设计师，把界面从“能用”变成“好看”；
把前端业务开发需要的公共组件一次性封装好。
做完之后，前端也和后端一样，基础设施就绪，下个章节开始直接往里填业务功能。
让 AI 当设计师大多数后端工程师没有设计师的审美，不知道配色怎么选、间距怎么给、什么风格适合什么产品。以前这事只能找设计师或者产品经理，现在 Claude Code 能帮你做到 80 分以上。
但前提和写代码一样：你的输入越具体，它的输出越好。不是说“帮我设计一个好看的界面”，而是要告诉它产品是什么、用户是谁、你想要什么风格。01 讲说的“思考质量决定输出质量”，在 UI 设计这个场景同样适用。
第一步：定风格方向先用咨询模式给 Claude Code 足够的上下文：
Hify 是一个 AI Agent 开发平台，面向技术团队内部使用，主要用户是开发者和技术管理者。界面以管理后台为主——大量的表格、表单、配置页面，加上一个对话交互页面。我想要的视觉风格：浅底  +  科技感点缀。整体用浅色背景保持信息可读性（管理后台表格多，深色底长时间看眼睛累）。但不要太素——侧边栏用深色底，按钮和关键交互元素用亮色，制造科技感和品牌感。色调方向：主色用蓝紫系（科技感强），辅色用青色或薄荷绿（数据 / 状态指示）。参考 Linear、Supabase 的视觉风格——干净但不无聊，有设计感但不花哨。帮我设计一套完整的设计系统：主色 / 辅色 / 背景色阶 / 文字色阶 / 圆角 / 阴影 / 过渡动效，用 CSS 变量输出。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
法语
德语
日语
韩语
俄语
西班牙语
解释
总结

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Claude Code 企业级全链路开发实战》，新⼈⾸单¥59

立即购买

登录后留言

精选留言

由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。

收起评论