\u6f14\u793a\u91cc，\u7ed9\u5927\u8bed\u8a00\u6a21\u578b\u4e00\u53e5\u63cf\u8ff0，\u5f88\u5feb\u5c31\u80fd\u5f97\u5230\u4e00\u4e2a\u80fd\u770b\u7684 React \u5361\u7247\u3002\u4f46\u80fd\u6e32\u67d3\u4e0d\u7b49\u4e8e\u80fd\u7ef4\u62a4\u3002\u751f\u6210\u4ee3\u7801\u5e38\u89c1\u7684\u95ee\u9898\u662f\u5c42\u7ea7\u8fc7\u6df1\u3001\u5185\u8054\u6837\u5f0f\u8fc7\u591a，\u4ee5\u53ca\u7ed5\u5f00\u73b0\u6709 Token\u3002<\/p>\n
\u628a\u751f\u6210\u4ee3\u7801\u63a5\u5165\u9879\u76ee\u4e4b\u524d，\u5148\u5728\u72ec\u7acb\u9884\u89c8\u9875\u68c0\u67e5 DOM \u6570\u91cf\u3001\u6700\u5927\u5d4c\u5957\u6df1\u5ea6\u3001\u5185\u8054\u6837\u5f0f\u548c Token \u4f7f\u7528\u60c5\u51b5\u3002\u4e0b\u9762\u7684\u811a\u672c\u53ef\u4f5c\u4e3a\u672c\u5730\u8bca\u65ad\u8d77\u70b9；\u9608\u503c\u5e94\u6309\u7ec4\u4ef6\u7c7b\u578b\u548c\u9879\u76ee\u57fa\u7ebf\u8bbe\u5b9a\u3002<\/p>\n
# \u8bca\u65ad\u547d\u4ee4：\u4f7f\u7528 puppeteer \u6293\u53d6\u751f\u6210\u9875\u9762\u7684 DOM \u8282\u70b9\u6570\u4e0e\u5c42\u7ea7\u6df1\u5ea6
\nnode –eval "
\nconst puppeteer = require('puppeteer');
\n(async () => {
\n const browser = await puppeteer.launch();
\n const page = await browser.newPage();
\n await page.goto('http:\/\/localhost:3000\/generated-ui-preview');
\n const metrics = await page.evaluate(() => {
\n const all = document.querySelectorAll('*');
\n let maxDepth = 0;
\n all.forEach(el => {
\n let depth = 0, p = el;
\n while (p.parentElement) { depth++; p = p.parentElement; }
\n if (depth > maxDepth) maxDepth = depth;
\n });
\n return { totalNodes: all.length, maxDepth };
\n });
\n console.log('DOM Total Nodes:', metrics.totalNodes);
\n console.log('Max Hierarchy Depth:', metrics.maxDepth);
\n await browser.close();
\n})();
\n"<\/p>\n
\u8f93\u51fa\u53ea\u7528\u4e8e\u5b9a\u4f4d\u7ed3\u6784\u95ee\u9898\u3002\u82e5\u4e00\u4e2a\u672c\u5e94\u7b80\u5355\u7684\u7ec4\u4ef6\u51fa\u73b0\u5927\u91cf\u5305\u88f9\u8282\u70b9，\u5c31\u56de\u5230\u7ec4\u4ef6\u8fb9\u754c\u548c\u5e03\u5c40\u89c4\u5219，\u800c\u4e0d\u662f\u7ee7\u7eed\u53e0 Prompt\u3002<\/p>\n
\u6a21\u578b\u4e0d\u4f1a\u5929\u7136\u77e5\u9053\u9879\u76ee\u7684\u7ec4\u4ef6\u8fb9\u754c，\u4e5f\u4e0d\u4f1a\u4e3b\u52a8\u9075\u5b88 Token \u547d\u540d\u3002\u5b83\u751f\u6210 style={{ padding: '13px', color: '#3a86ff' }} \u8fd9\u7c7b\u4ee3\u7801\u65f6，\u7b49\u4e8e\u7ed5\u8fc7\u4e86\u65e2\u6709\u7684\u6837\u5f0f\u7ea6\u675f\u3002\u63d0\u793a\u8bcd\u53ef\u4ee5\u63d0\u4f9b\u65b9\u5411，\u63d0\u4ea4\u524d\u4ecd\u8981\u7528\u89c4\u5219\u6821\u9a8c\u3002<\/p>\n
\u4e0b\u56fe\u5c55\u793a\u4e86\u6211\u4eec\u5728 CI\/CD \u6d41\u6c34\u7ebf\u4e2d\u52a0\u5165\u7684\u786e\u5b9a\u6027 UI \u6cbb\u7406\u67b6\u6784\u3002\u6a21\u578b\u751f\u6210\u539f\u59cb\u4ee3\u7801\u540e，\u7edd\u4e0d\u76f4\u63a5\u5199\u5165\u4ee3\u7801\u5e93\u6216\u6e32\u67d3\u5230\u5ba2\u6237\u7aef，\u800c\u662f\u5f3a\u5236\u7ecf\u8fc7 AST \u6821\u9a8c\u5f15\u64ce\u4e0e Token \u5339\u914d\u5668\u3002<\/p>\n
flowchart TD
\n UserPrompt["\u81ea\u7136\u8bed\u8a00 Prompt \/ \u89c6\u89c9\u7a3f\u8f93\u5165"] –> LLMEngine["LLM \u4ee3\u7801\u751f\u6210\u5f15\u64ce"]
\n LLMEngine –> RawCode["\u539f\u59cb\u751f\u6210\u4ee3\u7801 (React\/JSX)"]
\n RawCode –> ASTParser["AST \u8bed\u6cd5\u6811\u89e3\u6790\u5668 (Babel Parser)"]<\/p>\n
ASTParser –> CheckDepth{"DOM \u6df1\u5ea6 <= 6\u5c42?"}
\n CheckDepth — \u5426 –> RejectRule["\u62d2\u7edd\u5e76\u89e6\u53d1\u9000\u56de\u91cd\u8bd5 \/ \u964d\u7ea7\u6a21\u677f"]
\n CheckDepth — \u662f –> CheckToken{"\u7b26\u5408 Design Token \u89c4\u8303?"}<\/p>\n
CheckToken — \u5426 –> TokenFixer["Token \u5f3a\u884c\u6620\u5c04\u4e0e\u786c\u7f16\u7801\u66ff\u6362\u5668"]
\n CheckToken — \u5426 –> FixFail{"\u81ea\u52a8\u4fee\u526a\u5931\u8d25?"}
\n FixFail — \u662f –> RejectRule<\/p>\n
TokenFixer –> StandardCode["\u6807\u51c6\u5408\u89c4\u7ec4\u4ef6\u4ee3\u7801"]
\n CheckToken — \u662f –> StandardCode
\n StandardCode –> Bundler["Vite \/ Webpack \u7f16\u8bd1\u4ea7\u7269"]
\n RejectRule –> SafeFallback["\u9884\u8bbe\u5b89\u5168\u8bbe\u8ba1\u7ec4\u4ef6 (Design Fallback)"]<\/p>\n
\u4e3a\u4e86\u628a\u4e0a\u8ff0\u903b\u8f91\u843d\u5b9e\u5230\u5de5\u7a0b\u4e2d，\u6211\u4eec\u57fa\u4e8e @babel\/parser \u548c @babel\/traverse \u5199\u4e86\u4e00\u4e2a Node.js \u68c0\u67e5\u5de5\u5177\u3002\u5b83\u53ef\u4ee5\u5728\u6784\u5efa\u671f\u62e6\u622a DOM \u8fc7\u6df1\u3001\u786c\u7f16\u7801\u989c\u8272\u503c\u4ee5\u53ca\u65e0\u610f\u4e49\u5916\u5c42\u5305\u88f9\u3002<\/p>\n
import * as parser from '@babel\/parser';
\nimport traverse from '@babel\/traverse';
\nimport * as t from '@babel\/types';<\/p>\n
interface ASTValidationResult {
\n valid: boolean;
\n maxDepth: number;
\n hardcodedColors: string[];
\n errors: string[];
\n}<\/p>\n
const APPROVED_TOKENS = new Set([
\n 'var(–primary-color)',
\n 'var(–neutral-100)',
\n 'var(–spacing-md)',
\n]);<\/p>\n
export function validateGeneratedUI(code: string): ASTValidationResult {
\n const result: ASTValidationResult = {
\n valid: true,
\n maxDepth: 0,
\n hardcodedColors: [],
\n errors: [],
\n };<\/p>\n
try {
\n const ast = parser.parse(code, {
\n sourceType: 'module',
\n plugins: ['jsx', 'typescript'],
\n });<\/p>\n
let currentDepth = 0;<\/p>\n
traverse(ast, {
\n JSXElement: {
\n enter(path) {
\n currentDepth++;
\n if (currentDepth > result.maxDepth) {
\n result.maxDepth = currentDepth;
\n }
\n if (currentDepth > 8) {
\n result.errors.push(`DOM \u6df1\u5ea6\u8d85\u8fc7\u9650\u5236: \u8fbe\u5230 ${currentDepth} \u5c42`);
\n }
\n },
\n exit() {
\n currentDepth–;
\n },
\n },
\n JSXAttribute(path) {
\n \/\/ \u4e13\u95e8\u5ba1\u8ba1 style \u5185\u8054\u5c5e\u6027\u4e2d\u7684\u786c\u7f16\u7801 Hex \u989c\u8272
\n if (path.node.name.name === 'style') {
\n const attrVal = path.node.value;
\n if (t.isJSXExpressionContainer(attrVal) && t.isObjectExpression(attrVal.expression)) {
\n attrVal.expression.properties.forEach((prop) => {
\n if (t.isObjectProperty(prop) && t.isStringLiteral(prop.value)) {
\n const val = prop.value.value;
\n if (\/^#([0-9a-fA-F]{3}){1,2}$\/.test(val)) {
\n result.hardcodedColors.push(val);
\n result.errors.push(`\u4e0d\u5408\u89c4\u786c\u7f16\u7801\u989c\u8272: ${val}`);
\n }
\n }
\n });
\n }
\n }
\n },
\n });<\/p>\n
if (result.errors.length > 0) {
\n result.valid = false;
\n }
\n } catch (err: any) {
\n result.valid = false;
\n result.errors.push(`AST \u89e3\u6790\u62a5\u9519: ${err.message}`);
\n }<\/p>\n
return result;
\n}<\/p>\n
\u8fd9\u6bb5\u4ee3\u7801\u628a\u751f\u6210\u5185\u5bb9\u5f53\u4f5c\u5916\u90e8\u8f93\u5165\u5904\u7406\u3002\u89e3\u6790\u5931\u8d25\u3001\u7ed3\u6784\u8d85\u8fc7\u7ea6\u675f\u6216\u51fa\u73b0\u672a\u5141\u8bb8\u7684\u6837\u5f0f\u503c\u65f6，\u963b\u6b62\u5b83\u8fdb\u5165\u4e3b\u5206\u652f，\u5e76\u56de\u9000\u5230\u4eba\u5de5\u786e\u8ba4\u8fc7\u7684\u6a21\u677f\u3002<\/p>\n
\u628a\u751f\u6210\u7ed3\u679c\u653e\u5165\u7070\u5ea6\u6216\u9884\u89c8\u73af\u5883，\u6301\u7eed\u89c2\u5bdf\u4ee5\u4e0b\u9879\u76ee，\u5e76\u4e0e\u9879\u76ee\u539f\u6709\u57fa\u7ebf\u6bd4\u8f83：<\/p>\n
| \u9996\u5e27\u4e0e\u4ea4\u4e92\u6027\u80fd<\/td>\n | \u9632\u6b62\u989d\u5916\u8282\u70b9\u548c\u6837\u5f0f\u8ba1\u7b97\u62d6\u6162\u9875\u9762<\/td>\n<\/tr>\n |
| DOM \u6570\u91cf\u4e0e\u5d4c\u5957<\/td>\n | \u907f\u514d\u65e0\u610f\u4e49\u7684\u5305\u88f9\u5c42\u8fdb\u5165\u7ec4\u4ef6\u5e93<\/td>\n<\/tr>\n |
| Token \u547d\u4e2d\u60c5\u51b5<\/td>\n | \u4fdd\u8bc1\u4e3b\u9898\u5207\u6362\u548c\u8bbe\u8ba1\u66f4\u65b0\u4ecd\u7136\u6709\u6548<\/td>\n<\/tr>\n |
| \u964d\u7ea7\u8def\u5f84<\/td>\n | \u6821\u9a8c\u5931\u8d25\u65f6\u59cb\u7ec8\u6709\u7a33\u5b9a\u7684\u9ed8\u8ba4\u7ec4\u4ef6\u53ef\u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n AI UI \u751f\u6210\u9002\u5408\u4ea7\u51fa\u8349\u7a3f，\u5de5\u7a0b\u89c4\u5219\u8d1f\u8d23\u51b3\u5b9a\u8349\u7a3f\u80fd\u5426\u5408\u5165\u3002\u5148\u9650\u5b9a\u8f93\u5165\u548c\u7ec4\u4ef6\u8303\u56f4，\u518d\u7528 AST \u4e0e Token \u6821\u9a8c\u6536\u53e3，\u7ef4\u62a4\u6210\u672c\u4f1a\u4f4e\u5f88\u591a\u3002<\/p>\n","protected":false},"excerpt":{"rendered":" AI \u8f85\u52a9 UI \u751f\u6210\u4e0e\u8bbe\u8ba1\u7cfb\u7edf\u81ea\u52a8\u5316\u5b9e\u8df5：\u522b\u8ba9\u6f14\u793a\u6548\u679c\u9a97\u4e86\u4f60 |