一看就是 AI 做的网页？ClaudeCode+5 句提示词 5 分钟告别「蓝紫色」AI 味儿

哈喽，大家好！

我是阿星👋

为什么 AI 写的风格都是大差不差、不蓝不紫呢？

1、前段时间 TailwindCSS 工程师揭晓，因 AI 编码常用 Tailwind ，其 V1、V2、 默认背景为靛蓝色 ，若提示词不标 “不用蓝色和靛蓝”，AI 编码易样式雷同

所以现在一些项目的工程提示词都会加上不要使用靛蓝来避雷。

怎么破？两个方法

方法一：

最土办法：让 AI 直接抄源代码

1、那如果你想风格可控，你需要样式的颗粒度上规定颜色、字体、圆角、阴影、过渡等。

F12 就能直接看到相关的参数，这就是你样式的基因。直接复制下来发给 AI 看看就 ok 了。让它直接照着源代码去写。

方法二：

使用三方样式网站，让 AI 直接用现成样式

接下来我们看看 landingfolio 和 21st

1、langdingfolio 你可以直接选详细样式

2、21st 的 tsx 动效模板是基于固定代码的，可以防止你口述某个效果造成太大的偏差👇

都是非常重要的样式网站建议收藏起来这两个网站。

实操：

把三方网站样式代码带入 ai coding

最后我们试试从 21st 上随便复制一段 demo 代码保存为两个文件。

注意每个 21st 的模板都是 2 个示例代码👇注意是两个文件不是一个。

我把这两个代码保存到本地，

然后把这两段代码作为附件连同其他提示词发给 AI 即可。提示词参考如下

===

帮我写一个个人主页主要呈现以下内容：

阿星 AI 工作室核心业务清单

核心业务板块 AI 智能体开发

* 电商智能助手：直播话术生成、订单自动整理、商品评价分析

* 人力资源工具：简历风险筛查、JD 匹配度评分系统定制化开发

* 行业解决方案：法律/心理学案件流程等自动化管理系统

* 定制化开发：Web 应用、小程序、移动 APP 多端同步

* RAG 系统研发与企业系统深度集成

* 大模型线上部署与微调服务企业 AI 培训服务

* 办公/电商等 AI 工作流实战教学

* 社群 SOP 自动化提效工作流* 自媒体风格迁移等爆款工作流

* 私域流量裂变策略（教培/餐饮行业）指导 AI 内容制作与传播

* AI 实战课程研发制作* 自媒体图文/短视频批量生成

* 数字化内容代运营服务 AI 硬件设备开发

* 实体 AI 交互相机

* 文旅图书馆 AI 导览设备

* 智能 AI 玩具产品

===

视觉上，参考`demo.tsx`和`shape-landing-hero.tsx`的代码，确保：

1. 分析组件结构并识别所有必需的依赖。

2. 查看组件的参数和状态。

3. 识别任何必需的上下文提供者或挂钩，并安装它们。

4. 如果组件需要，使用 lucide-react 图标作为 SVG 或徽标。

5. 其他区块的视觉与 Hero 部分适配。

丢给 cc+deepseekv3.1 去写就完事了

怎么把 deepseekv3.1 接入 cc 上期已经写过了👇

戳 DeepSeekV3.1+ClaudeCode 丨小白 5 分钟写出高颜值封面生成器

效果还行

AI 编程还有很多好玩的东东，每个小白都可以轻松入门～可以加入我们一起学习哦～

我是阿星，我们下期再见！

#商业表达力 #个人的进化 #日拱一卒 #营销 #AI 前沿