图像审计
- 作者仓库星标 0
- 作者更新于 实时读取
- 作者仓库 pythh
- 领域
- 设计与多媒体
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @ugobe007 · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 即装即用
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- 未声明（默认跨平台）
- 底层运行要求
- 无特殊要求
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- 网络行为
- 仅限本地
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。
需要注意： 未限定 allowed-tools，默认拥有全部工具权限。
---
name: ai-saas-redesign
description: End-to-end workflow for redesigning a SaaS or AI product landing page and building an interactiv…
category: 设计与多媒体
runtime: 无特殊运行时
---
# ai-saas-redesign 输出预览
## PART A: 任务判断
- 适用问题：视觉内容、演示材料、信息图或设计交付。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“Phase 1 — Evaluate the Existing Site / Phase 2 — Design Philosophy / Phase 3 — Copy Strategy”读取原文规则，不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于视觉内容、演示材料、信息图或设计交付，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“Phase 1 — Evaluate the Existing Site / Phase 2 — Design Philosophy / Phase 3 — Copy Strategy”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。原文出现了 `/activate` 这类斜杠命令；如果你的 Agent 支持命令触发，优先用命令开场，再补充目标和边界。
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是：读取文件、写入/修改文件。
先用一个小任务确认它会围绕“Phase 1 — Evaluate the Existing Site / Phase 2 — Design Philosophy / Phase 3 — Copy Strategy”工作；涉及文件或命令时，先看 diff、日志、预览或测试结果。
检查最终产物是否包含明确结果、必要证据和下一步动作；如果输出泛泛而谈，就补充输入、边界和验收标准后重跑。
---
name: ai-saas-redesign
description: End-to-end workflow for redesigning a SaaS or AI product landing page and building an interactiv…
category: 设计与多媒体
source: ugobe007/pythh
---
# ai-saas-redesign
## 什么时候使用
- 把设计与视觉方向的常用动作沉淀成 Agent 可调用的技能 适合处理界面、视觉、封面、信息图或演示材料交付，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。 把任务拆成可执行、可检查、可继续迭代的步骤…
- 面向视觉内容、演示材料、信息图或设计交付，优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「Phase 1 — Evaluate the Existing Site / Phase 2 — Design Philosophy / Phase 3 — Copy Strategy」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。
skill "ai-saas-redesign" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> Phase 1 — Evaluate the Existing Site / Phase 2 — Design Philosophy / Phase 3 — Copy Strategy
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> 无特殊运行时 | 读取文件、写入/修改文件 | 主要在本地完成
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
}AI SaaS Redesign Skill
End-to-end process for redesigning a SaaS landing page and building an interactive AI agent pipeline UX. Follow phases in order.
Phase 1 — Evaluate the Existing Site
Visit the live site and record:
- Headline clarity: Does it state the product value in one sentence?
- Hero CTA: Specific (URL input, email) or vague ("Get Started")?
- Best existing copy: Find the one line that works — elevate it to the hero.
- Typography: Distinctive pairing or generic single-weight Inter?
- Color dominance: Any single overused color (e.g., cyan) to reduce?
- Redundant sections: Anything duplicated by a better visual element?
Save findings before proceeding.
Phase 2 — Design Philosophy
Write three distinct approaches in ideas.md, each defining: Design Movement, Color Philosophy, Typography System, Layout Paradigm, Signature Elements, Animation Philosophy. Select one and commit fully — document the chosen style at the top of every CSS/component file.
Anti-patterns: Purple gradients, excessive rounded corners, full-page centered hero, cyan as dominant fintech accent.
Proven dark AI/fintech palette:
- Background:
oklch(0.13 0.01 264)(deep obsidian) - Primary accent:
oklch(0.696 0.17 162.48)(emerald green) - Secondary accent:
oklch(0.769 0.188 70.08)(amber orange) - Fonts: Space Grotesk Bold (display) + JetBrains Mono (data values)
Full token set: references/design-tokens.md
Phase 3 — Copy Strategy
| Element | Rule |
|---|---|
| Hero headline | Action verb + outcome, ≤6 words. e.g., "Automate your investment pipeline." |
| Hero subheadline | Name the agent, state what it does, end with the founder's only job |
| CTA label | Verb + agent name. e.g., "Activate PYTHIA" not "Get Started" |
| Pipeline copy | Each step = what the agent does, not what the user does |
| Closing line | Always end the agent intro with the user's minimal obligation |
Highest-converting closing pattern: "You approve. You show up. That's it."
Phase 4 — Name the AI Agent
- Derive from the product name (pythh.ai → PYTHIA, the Oracle of Delphi)
- Give it a mythological or archetypal anchor for memorability
- Write a one-sentence origin: "Named for the high priestess of Delphi who saw the future before anyone else."
- Define the acronym if useful (PYTHIA = Predictive Yield & Thesis Heuristic Intelligence Agent)
- Use the name as the primary CTA verb: "Activate PYTHIA"
Agent appears in: hero activity card, "Meet Your [Agent]" section with avatar + origin story, all pipeline milestone copy, footer tagline.
Phase 5 — Activation Flow Architecture
Single /activate route, Step state: entry → scanning → results → pipeline
Wire hero CTA:
sessionStorage.setItem("pythia_url", url);
navigate("/activate");Step 1 — Entry: Full-screen URL input, pre-populate from sessionStorage, validate before advancing.
Step 2 — Scanning: 6-step progress tracker, staggered timers (1000–2000ms/step), pulsing agent avatar, auto-advance on completion.
Step 3 — Match Results: Ranked cards (name, firm, role, match score, signal score, sector tags). Expandable detail: WHY MATCHED + RECENT SIGNAL + EMAIL TARGETS panel. PYTHIA insight summary above list. Bottom CTA: full-width amber "Run Pipeline with [Agent] →".
Step 4 — Pipeline Feed: Left: milestone stream (auto-advancing, 3–8s stagger). Right: sidebar with stage tracker + confirmed meetings. Meeting milestones show amber Approve / Reschedule / Decline buttons. On approve: milestone confirms, meeting added to sidebar.
Milestone types: match | pitch | outreach | response | meeting | brief
Full component patterns: references/pipeline-component-patterns.md
Phase 6 — Email Inference Engine
Build src/lib/emailInference.ts for outreach-automation products:
| Priority | Pattern | Confidence |
|---|---|---|
| 1 | firstname@domain |
High |
| 2 | firstname.lastname@domain |
High |
| 3 | firstinitial.lastname@domain |
Medium |
| 4 | lastname@domain |
Medium |
| 5 | firstinitiallastname@domain |
Low |
| 6 | pitches@, deals@, dealflow@ |
Fallback (pitch) |
| 7 | info@, contact@, hello@ |
Fallback (generic) |
Domain inference: maintain FIRM_DOMAIN_MAP for known firms. For unknowns, slugify (lowercase, strip "Capital/Ventures/Partners/Fund/Group", remove spaces, append .com).
Surface in two places:
- Match results expanded card → "PYTHIA EMAIL TARGETS" panel with confidence badges
- Pipeline outreach milestones → chip row of tried addresses, checkmark on primary
Full implementation: references/email-inference-template.ts
Phase 7 — Image Generation
Generate images before building components. Use generate_image for:
- Hero background (abstract dark texture matching design philosophy)
- Agent avatar (sleek AI icon — not a face, not abstract art)
- Dashboard/pipeline UI mockup (dark-mode product screenshot style)
Reject any result that looks like abstract art, a disco ball, or a stock illustration. Regenerate with more specific UI/dashboard language.
Upload with manus-upload-file --webdev and use the returned CDN URL directly in code.
Sections: Remove vs. Keep
| Section | Decision | Reason |
|---|---|---|
| "How [Agent] Works" step list | Remove if activation flow exists | The interactive flow IS the explainer |
| "Powered by / Backed by" logo bar | Remove on dark backgrounds | Dark logos on dark bg are invisible |
| Generic 3-up feature cards | Replace with agent story | Agent narrative converts better |
| Live signals / data table | Keep | Demonstrates real product value |
| Testimonials | Keep | Social proof anchors credibility |
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核