Files
ai-beautify/plain_html/4 designs.md
xiaomai b5447a9903 feat(ai-test): add baseline and results for AI beautification test
This commit introduces a new test suite for evaluating the HTML/CSS beautification capabilities of different AI models.

The suite includes:
- A baseline unstyled HTML file (`plain_html/index.html`) to be used as the common input.
- Standardized prompts for various design aesthetics (e.g., Professional, Minimalist).
- Initial results for the 'Professional' style from several models, including ChatGPT, Kimi, Gemini, Doubao, Deepseek,
and Yuanbao.
2025-09-26 14:00:03 +08:00

2.3 KiB
Raw Blame History

👌太好了~那我给你准备几套 统一的 Prompt 模板 ,你可以直接复制粘贴给各家 AI看看它们的美化能力差异。每个 Prompt 保证 同样的约束条件 (不改语义、不删结构),只是目标风格不同。🎨


🎯 基础约束(四个 Prompt 都相同部分)

请不要修改 HTML 的语义结构、ID、ARIA 属性或元素顺序。

你只能添加或修改 <style> 内的 CSS或者生成一个独立的 CSS 文件并说明如何引入。

输出时请提供完整的 HTML<style>),或 HTML + 单独的 CSS 文件。

额外请写出:

  • 三条设计原则(说明你的美化思路)
  • 五种可选色彩方案(只列调色板,不必都实现)

🟢 Prompt 1 — 极简风 Minimalist

在保证语义结构不变的前提下,请将此页面美化为一个 极简风 网站:

  • 使用大量留白、细线条和轻量字体
  • 强调排版和间距,而不是装饰
  • 响应式适配移动端与桌面端

🔵 Prompt 2 — 企业级 Professional

在保证语义结构不变的前提下,请将此页面美化为一个 企业级官网风格

  • 使用稳重的配色(蓝色/灰色为主)
  • 强调信息层级(标题、副标题、按钮)
  • 响应式设计,保证桌面端有左右布局,移动端有上下堆叠

🟡 Prompt 3 — 卡通 / 轻松 Cartoon

在保证语义结构不变的前提下,请将此页面美化为一个 卡通风格 网站:

  • 使用明亮活泼的配色(如黄色、橙色、粉色)
  • 圆角、阴影、手绘感元素
  • 字体更亲切,按钮更大更好点

Prompt 4 — 暗黑风 Dark Mode

在保证语义结构不变的前提下,请将此页面美化为一个 暗黑风网站

  • 默认深色背景,浅色文字
  • 高对比度按钮与链接
  • 响应式下保持良好的阅读体验
  • 可以额外提供一套浅色主题的切换方案(可选)

这样你就能用同一个 基线 HTML + 四个 Prompt ,把结果交给 OpenAI、Anthropic、Google、Meta 或其他 AI对比大家在 排版/配色/层次/可维护性 上的差异了。🔍

要不要我再帮你写一份 对比打分表模板Excel/Markdown ,方便你把结果逐项评分?📊