企业官网建设流程全解析

配备AI智能聊天功能, 拥有问答助手特性, 具备AI智能搜索能力, 借助多模态理解力助力, 帮你轻松跨越以0为起始点抵达1的创作门槛。

你要去促使产生那契合真实项目规范的前端组件代码, 并非单单只是那种能够运行得通的玩具示例。常理下的提示词通常会致使输出出现缺少props定义的情况, 没有类型设定, 没有测试桩, 没有响应式处理, 甚至会直接把数据写死。

普通版提示词：能跑就行

径直告知, “写一个按钮组件”, 很大可能它会返回一段带有div的内容, 具备内联样式, 没有被导出, 不存在props, 也没有注释。

输入：“写一个React按钮组件”

这一步骤实施起来颇为简易, 径直将这句话发送过去便可, 然而其结果近乎难以接入现代工程, 呈现出这样的情况, 即没有相关内容, 无法被其他文件所容纳。

基础升级：加约束条件

明确技术栈和基本结构，避免自由发挥。

方法一: 指定框架, 指定语言, 指定导出方式, 写明必需字段, 限制实现粒度。

编写一个React函数组件, 采用FC类型, 一定要接收两个props, 肯定是从功能和特性方面来说, 存在默认导出的情况, 不要做任何包含CSS‑in‑JS或者样式文件的操作行为, 仅仅返回JSX。

方法二：用角色指令锚定输出风格

作为一名资深前端工程师针对公司设计可复用 UI 库你来输出一个符合 v5 规范的组件被要求不依赖外部样式库并且支持状态还要使用原生标签。

注意, 在这个时候, 仍然存在着缺少类型定义细节的可能性, 比如说也许类型会被简写成any句号。

Type

生成草稿，转换文本，获得写作帮助-等等。

下载

进阶版提示词：驱动完整交付物

真正能够实际运用的组件, 是需要有适配的配套资产的。而进阶的提示词呢, 则要达成使同步产出类型定义, 以及测试桩, 还有使用示例, 甚至连接到配置片段的效果出来。

第一步：声明交付目标

要生成一个处于生产就绪的React组件, 这个组件要涵盖以下所有内容, 其中有1个TSX文件, 还有1个与之相对要声明的.d.ts类型声明（假若存在泛型则需要明确地导出）, 并且要有1个单元测试文件（此文件要覆盖正常点击以及禁用状态下不可点击的情况）, 另外还要1个最小可用示例（该示例要包含App.tsx调用片段）。

第二步：嵌入工程上下文

所提及的该组件, 会被整合进入那基于的单体仓库之中, /ui包已然开启 ++ 模式, any类型是不被允许的, 隐式any是被禁止的, 必须应用React.去处理ref转发。

第三步：锁定边界与防错

输入当中, 是绝对不可以使用诸如/这类并非必要的Hook的；是明确禁止引入、clsx这类具有运行时依赖的情况的；所有相关内容都务必得通过prop进行传入, 绝对不可以进行硬编码操作；状态是必须要同时对其进行控制以及aria-相关的某种情况的。

这一步极为紧要, 能够依据指令进行结构化呈现, 输出多个代码块, 每一个代码块都带有清晰明确的文件路径注释, 像是注释中有//.tsx、//.test.tsx这样的形式。要是遗漏了//.types.ts这一行, 那么它便不会生成类型文件 , 而文件路径注释是促使多文件输出得以实现的唯一开关装置。