ai 技能审计

设计与多媒体社区

作者仓库星标 0
作者仓库 pythh

解读按原文结构重写，命令、链接、术语均保留；右侧可核对作者原始 SKILL.md

方法与流程

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")?
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…
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

适用与边界

当前原文没有单列适用场景。
当前原文没有单列不适用场景或限制。

原文中的明确线索

要点：「Headline clarity」、「Hero CTA」、「Best existing copy」、「Typography」、「Color dominance」、「Redundant sections」、「Anti-patterns」、「Proven dark AI/fintech palette」
文件与命令：ideas.md、oklch(0.13 0.01 264)、oklch(0.696 0.17 162.48)、oklch(0.769 0.188 70.08)、references/design-tokens.md、/activate、Step、entry → scanning → results → pipeline

流狐整理：以上内容来自当前 SKILL.md 的章节与原词；未补写作者没有声明的工具、兼容性或能力。

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.

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

流狐档案作者与许可取自来源；运行、权限和网络为流狐检测或估算

流狐分类: 设计与多媒体
作者声明 Agent: 未找到明确声明；不据此推断已兼容或已测试
静态检查: 88 / 100 · 启发式扫描，不代表运行安全
作者 / 版本 / 许可: @ugobe007 · 未声明 license
流狐 Token 估算: 低消耗
流狐接入估算: 即装即用
是否需要外部 API Key: 未发现要求
检测到的系统要求: 未声明
底层运行要求: 未声明
检测到的文件与系统行为: 只读
允许写入 / 修改
检测到的网络行为: 仅限本地
安装命令数: 无（仅作为资料）

档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。

需要注意： 未限定 allowed-tools，默认拥有全部工具权限。

输出预览 ai-saas-redesign.preview

作者没有在当前 SKILL.md 中定义固定输出样例。

SKILL.md SKILL.md

# 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"* |

…

证据边界与执行链路

作者原文负责流程事实；流狐只索引当前章节、要点、文件与命令。

章节    -> Phase 1 — Evaluate the Existing Site → Phase 2 — Design Philosophy → Phase 3 — Copy Strategy → Phase 4 — Name the AI Agent → Phase 5 — Activation Flow Architecture → Phase 6 — Email Inference Engine
要点    -> Headline clarity · Hero CTA · Best existing copy · Typography · Color dominance · Redundant sections · Anti-patterns · Proven dark AI/fintech palette
文件/命令 -> ideas.md · oklch(0.13 0.01 264) · oklch(0.696 0.17 162.48) · oklch(0.769 0.188 70.08) · references/design-tokens.md · /activate · Step · entry → scanning → results → pipeline
内容 SHA-256 -> 674bdca01ffd