Skip to content

Fairy-fly/UI-Sense-AI

BranchesTags

Repository files navigation

UI Sense AI

UI-Sense-AI 是一个本地优先的 UI 灵感与 Prompt 记忆工具，帮助开发者把个人审美沉淀为可复用的 AI Agent 开发提示词。

v2.1.0 · Scope Guard & Page/Module Split

UI Sense AI 是一个本地优先的 UI 灵感与 AI Agent Prompt 记忆工具。它帮你收集优质界面截图、分析设计语言、沉淀个人审美偏好，并把这些偏好转成可直接交给 Codex / Claude Code 使用的 UI 开发提示词。核心目标：让 AI Agent 生成的界面更有产品质感、更统一、更贴近你的审美，而不是回到默认后台模板。

Why UI Sense AI

AI Agent 生成界面时有几个顽固问题：

  • 看起来都像默认后台模板，缺乏产品质感
  • 每次生成的风格不一致
  • 配色、圆角、间距、组件语言没有长期记忆
  • 你不知道什么样的 Prompt 产出最好

UI Sense AI 用一套本地工具把这些隐性偏好变成可复用、可迭代的结构化资产。

Project Highlights

  • Local-first — 灵感、评分、审美记忆、Prompt 历史默认保存在本地 SQLite，不依赖云同步。
  • UI inspiration library — 用截图、URL、标签、评分和收藏集整理长期可复用的 UI 参考。
  • Aesthetic memory — 从高评分灵感、AI 分析和 Prompt 反馈中持续提炼个人审美偏好。
  • Prompt Generator — 把项目需求、参考灵感、审美记忆和反馈洞察组合成结构化开发提示词。
  • Codex / Claude Code workflow — 生成结果强调页面范围、组件语言、禁止项和验收清单，适合直接交给 AI coding agent。
  • Anti-generic AI UI — 通过 Scope Guard、页面/模块拆分和风格禁忌减少“AI 味”和廉价后台风。
  • Portfolio-friendly full stack — Next.js App Router、TypeScript、Tailwind CSS 4、shadcn/ui、Prisma、SQLite 与 AI Workflow 组合完整。

Core Features

功能 说明
UI 灵感收藏 上传截图、填写标签和评分，记录优秀参考
AI 设计分析 基于元信息或真实图片分析配色、布局、组件和设计语言
审美记忆生成 从高评分灵感和 AI 分析中自动总结长期审美偏好
Prompt 生成器 模板 + 灵感 + 审美记忆 + 反馈策略，生成可执行开发提示词
Prompt 反馈 对历史 Prompt 评分、收藏、标记好用/需要改进
反馈反哺策略 从反馈中总结 Prompt 结构和风格偏好，自动优化后续生成
收藏集管理 按项目方向整理灵感，支持 Prompt 按收藏集筛选
URL 元信息读取 粘贴网页链接自动填入标题、描述和 favicon
视觉分析 (可选) 配置 OpenAI-compatible 视觉模型后，支持真实图片分析
Scope Guard 根据开发阶段控制页面范围，区分独立页面与页面内模块
本地优先 SQLite 本地存储，不上传数据，不依赖云服务

Product Workflow

收藏 UI 灵感 → AI 分析设计特征 → 生成审美记忆
                                    ↓
填写项目需求 → 选择参考灵感 → 生成 Prompt
                                    ↓
使用 Prompt → 反馈评分 → 反哺后续策略

Screenshots

当前仓库已放入一组本地演示截图，详见 screenshots/README.md。

UI Sense AI Dashboard

Screen Suggested file Status
Dashboard screenshots/dashboard.png 已补充
Inspirations 列表 screenshots/inspirations.png 已补充
新增灵感页面 screenshots/inspiration-new.png 已补充
Prompt Generator screenshots/prompt-generator.png 已补充
Settings screenshots/settings.png 已补充

Usage Scenarios

UI Sense AI 适合这些开发场景：

  • 个人 UI 审美沉淀 — 把喜欢/不喜欢的界面变成长期可复用的审美资料库。
  • AI Agent 开发提示词生成 — 为 Codex / Claude Code 生成更具体、更可执行的 UI 开发 Prompt。
  • 项目风格统一 — 在多个页面或迭代中复用同一套配色、布局、组件和禁止项。
  • 课程设计 / 作品集项目包装 — 展示完整的本地工具、AI Workflow、Prompt Engineering 与产品思考。

更多说明见 docs/USAGE_SCENARIOS.md。

Tech Stack

Layer Stack
Framework Next.js 15 (App Router)
Language TypeScript
Styling Tailwind CSS 4 + shadcn/ui
Database SQLite + Prisma
AI (text) DeepSeek API (OpenAI SDK compatible)
AI (vision) OpenAI-compatible multimodal endpoint (e.g. Bailian)
Validation Zod
Toast Sonner
Icons Lucide React

Local Setup

# 1. Clone
git clone https://github.com/Fairy-fly/UI-Sense-AI.git
cd UI-Sense-AI

# 2. Install
npm install

# 3. Configure environment
cp .env.example .env.local
# Edit .env.local — see Environment Variables below

# 4. Initialize database
npx prisma generate
npx prisma migrate dev

# 5. Seed demo data (optional)
npx prisma db seed

# 6. Start dev server
npm run dev

访问 http://localhost:3000（实际端口以终端输出为准）。

Environment Variables

Copy .env.example to .env.local and configure:

Variable Required Description
DATABASE_URL Yes SQLite path, default: file:./dev.db
DEEPSEEK_API_KEY No DeepSeek API key for Prompt optimization
DEEPSEEK_BASE_URL No Default: https://api.deepseek.com
DEEPSEEK_MODEL No Default: deepseek-v4-flash
DEEPSEEK_TEMPERATURE No Default: 0.4
DEEPSEEK_MAX_TOKENS No Default: 6000
DEEPSEEK_TIMEOUT_MS No Default: 45000
AI_ANALYSIS_MODE No text (default) or vision
VISION_MODEL No Vision model ID, e.g. qwen3-vl-flash
VISION_API_BASE_URL No OpenAI-compatible endpoint
VISION_API_KEY No Vision API key
NEXT_PUBLIC_APP_URL No Default: http://localhost:3000
MAX_UPLOAD_SIZE No Default: 10485760 (10MB)

Never commit .env.local — it's in .gitignore.

Data & Safety

UI Sense AI 是本地优先工具，不是云端 SaaS。

  • 所有核心数据默认保存在 prisma/dev.db (SQLite)
  • 上传图片保存在 public/uploads/，该目录已默认从 git 中排除
  • API key 只在服务端读取，不写入前端 bundle
  • .env / .env.local 已加入 .gitignore，不要提交真实密钥
  • URL metadata fetcher 会校验协议，并阻止 localhost / 私有 IP 范围
  • 图片分析只读取本地 /uploads/ 文件，并带有 size / MIME 检查
  • 当前版本没有登录、多用户、云同步、遥测或外部 analytics

如果要把仓库作为作品集展示，建议使用脱敏演示数据和截图，不要提交真实项目截图、私有客户资料或个人 API key。

Project Structure

app/              # Next.js App Router pages
components/       # React components (prompts, inspirations, collections, settings, ui)
lib/              # Core logic (actions, ai, filters, prompt-builder, aesthetic-memory)
prisma/           # Database schema and migrations
public/uploads/   # User-uploaded images (gitignored)
docs/             # Project documentation
types/            # TypeScript type definitions

Version Milestones

Version Highlight
v1.0 MVP: inspiration CRUD, local prompt builder, DeepSeek AI
v1.3 Collections, Prompt templates, URL metadata
v1.4 AI text analysis, Vision provider foundation
v1.6 Real vision analysis via Bailian API
v1.7 Aesthetic memory generation
v1.8 Prompt feedback: ratings, favorites, SelectableChip
v1.9 Feedback-driven prompt strategy
v2.0 Local product polish, full regression, stable release
v2.0.1 README / GitHub showcase polish
v2.0.2 README table rendering and version display fix
v2.0.3 Move planning DOCX into docs/
v2.0.4 Project memory update after local tool phase completion
v2.0.5 Add reusable Agent workflow skills and clean project memory
v2.0.6 README version display and milestone sync
v2.1.0 Scope Guard & Page/Module Split

Roadmap

  • v2.1.x Demo data, sanitized screenshots, Prompt quality report
  • v2.2 Batch import UI inspirations and better collection workflows
  • v2.3 Stronger prompt evaluation and side-by-side output comparison
  • v2.4 Mobile layout polish and screenshot-friendly demo mode
  • v3.0+ Optional cloud sync / multi-user / browser extension (long-term future)

Development Notes

npm run dev        # Start dev server
npm run build      # Production build
npx tsc --noEmit   # Type check
npm run lint       # ESLint
npx prisma studio  # Browse database

Before committing

npm run build && npx tsc --noEmit && npm run lint

Rules

  • Never commit .env.local, prisma/dev.db, or user images in public/uploads/
  • Never expose API keys in frontend code, docs, or git history
  • Default branch: main
  • UI copy is Chinese-first; don't translate to English
  • Don't use asChild on shadcn components — use buttonVariants() for link-styled buttons

License

MIT

About

Local-first UI inspiration and prompt memory tool for AI coding agents.

Topics

ui-design typescript inspiration sqlite nextjs developer-tools codex design-system prisma tailwindcss local-first ai-agent prompt-engineering shadcn-ui ai-workflow claude-code design-memory ui-inspiration

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

40 tags

Contributors

Languages