← 返回项目库

Hallmark AI 设计技能｜主题化页面与反模式规则

面向 AI 编程助手的主题化设计技能，帮助页面摆脱千篇一律的模板感。

项目提供 20 种视觉主题、页面结构规则、组件形态与反模式检查，并附带一个可直接打开的静态演示页。当前中文适配用于本地预览，外部服务未接入。

真实界面

项目截图

共 6 张

暖调
标本
午夜
花园
编辑
钴蓝

Capabilities

核心功能

✓20 种可切换的视觉主题
✓21 种页面结构与 50 种组件形态规则
✓首屏、导航与页脚的结构化组合
✓57 道反模式检查思路
✓Claude Code、Cursor 与 Codex 调用方式
✓静态本地演示页与中文适配说明

适用场景

为 AI 生成的产品页面建立差异化视觉方向
在写代码前选择页面结构与设计语气
用反模式清单审查渐变、通用卡片和模板化布局

适合谁

使用 Claude Code、Cursor 或 Codex 构建网页的产品设计师、前端开发者与独立创业者。

商业化思路

开源设计工具；可作为设计系统适配、界面评审与 AI 获客页面制作服务的基础能力。

你会拿到什么

  • ✓MIT 许可证下的上游源码包
  • ✓中文静态演示页、主题样本与本地预览说明

部署流程

  1. 1将源码包放入本地项目或静态文件服务器
  2. 2打开 site/index.html 或运行静态 HTTP 服务查看演示

真实验证结果

已通过 6 个真实运行中文界面、HTTP、可见正文、控制台、坏图和横向溢出质量门。

部署前须知

主目录页已完成中文适配；上游示例目录仍保留部分原始英文内容。演示只使用本地静态数据，不提供外部 API、账号或云端服务。

部署难度

简单

最低配置

支持静态文件的本地或 Web 服务器；静态演示无需 Node.js 构建，使用 npx 安装技能时需要 Node.js。

开源许可证

MIT

最后验证

2026-09-02

技术栈

HTMLCSS原生 JavaScript

授权说明

上游仓库包含 MIT 许可证文件；本适配保留原许可证边界，不改变上游权利声明。

Release notes

版本记录

1 个已发布版本

vcn-ea964577f78f 当前推荐

基于上游 1.1.0，增加主目录中文界面、本地预览与演示数据披露，并移除外部分析与动态星标请求。

部署要求：现代浏览器；查看静态演示只需要静态文件服务器，安装技能时需要 Node.js 与 npx。

已知问题：主题切换与页面演示在本地运行；外部服务未接入，README 与部分上游示例仍可能出现英文。

登录后领取