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

68 阅读3分钟

哈喽,大家好!

我是阿星👋

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

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

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

怎么破?两个方法

方法一:

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

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

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

ImageImage

方法二:

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

接下来我们看看landingfolio和21st

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

ImageImage

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

Image

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

实操:

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

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

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

Image

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

Image

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

===

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 实体AI交互相机

  • 文旅图书馆AI导览设备

  • 智能AI玩具产品

===

视觉上,参考demo.tsxshape-landing-hero.tsx的代码,确保: 

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

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

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

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

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

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

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

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

Image

效果还行

图片

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

我是阿星,我们下期再见!