@haposoft/cafekit 0.16.0-rc.7 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +116 -27
- package/bin/__tests__/codex-hooks-ownership.test.js +239 -0
- package/bin/__tests__/codex-hooks.test.js +295 -0
- package/bin/__tests__/codex-native.test.js +2289 -34
- package/bin/__tests__/develop-contract.test.js +400 -23
- package/bin/__tests__/installer-safety.test.js +3 -3
- package/bin/__tests__/optional-skill-inventory.test.js +249 -0
- package/bin/__tests__/output-styles.test.js +214 -0
- package/bin/__tests__/package-inventory.test.js +2131 -16
- package/bin/__tests__/runtime-schema.test.js +111 -0
- package/bin/__tests__/secret-output-guardrail.test.js +122 -0
- package/bin/__tests__/skill-routing-source.test.js +172 -0
- package/bin/__tests__/specs-v2-execution-closeout.test.js +1 -1
- package/bin/install.js +10 -0
- package/bin/lib/codex-install.js +170 -5
- package/bin/lib/context.js +14 -0
- package/bin/lib/i18n.js +12 -6
- package/bin/lib/skill-deps.js +5 -5
- package/bin/phases/claude-runtime.js +23 -0
- package/bin/phases/claude-settings.js +8 -0
- package/bin/phases/codex-hooks.js +156 -0
- package/bin/phases/codex-runtime.js +29 -38
- package/bin/phases/copy-payload.js +8 -2
- package/bin/phases/select-skill-bundles.js +96 -0
- package/bin/phases/skill-inventory.js +71 -0
- package/bin/phases/skills-setup.js +9 -2
- package/bin/phases/write-metadata.js +8 -5
- package/package.json +8 -2
- package/src/claude/CLAUDE.md +3 -3
- package/src/claude/agents/brainstormer.md +52 -69
- package/src/claude/agents/code-auditor.md +32 -14
- package/src/claude/agents/debugger.md +35 -20
- package/src/claude/agents/deployer.md +12 -5
- package/src/claude/agents/docs-keeper.md +11 -1
- package/src/claude/agents/implementer.md +25 -13
- package/src/claude/agents/inspector.md +6 -3
- package/src/claude/agents/project-manager.md +1 -1
- package/src/claude/agents/researcher.md +26 -55
- package/src/claude/agents/spec-maker.md +24 -13
- package/src/claude/agents/strategist.md +52 -0
- package/src/claude/agents/test-runner.md +117 -132
- package/src/claude/agents/ui-ux-designer.md +1 -1
- package/src/claude/hooks/__tests__/fixtures/statusline-default.golden +1 -0
- package/src/claude/hooks/__tests__/precompact.test.js +158 -0
- package/src/claude/hooks/__tests__/spec-gate.test.js +87 -4
- package/src/claude/hooks/__tests__/state.test.js +254 -3
- package/src/claude/hooks/__tests__/statusline.test.js +196 -0
- package/src/claude/hooks/agent.cjs +1 -1
- package/src/claude/hooks/docs-sync.cjs +12 -10
- package/src/claude/hooks/inspect-block.cjs +1 -1
- package/src/claude/hooks/lib/config.cjs +3 -0
- package/src/claude/hooks/lib/hook-state-dir.cjs +39 -0
- package/src/claude/hooks/lib/secret-keywords.cjs +42 -0
- package/src/claude/hooks/precompact.cjs +105 -0
- package/src/claude/hooks/rules.cjs +1 -1
- package/src/claude/hooks/secret-output-guardrail.cjs +43 -0
- package/src/claude/hooks/session.cjs +27 -1
- package/src/claude/hooks/spec-gate.cjs +3 -3
- package/src/claude/hooks/spec-state.cjs +32 -5
- package/src/claude/hooks/state.cjs +1 -1
- package/src/claude/hooks/task-scaffold-guard.cjs +1 -1
- package/src/claude/hooks/usage.cjs +1 -1
- package/src/claude/migration-manifest.json +29 -15
- package/src/claude/output-styles/coding-level-0-eli5.md +103 -0
- package/src/claude/output-styles/coding-level-1-junior.md +124 -0
- package/src/claude/output-styles/coding-level-2-mid.md +146 -0
- package/src/claude/output-styles/coding-level-3-senior.md +148 -0
- package/src/claude/output-styles/coding-level-4-lead.md +159 -0
- package/src/claude/output-styles/coding-level-5-god.md +91 -0
- package/src/claude/references/debugger/core-philosophy.md +5 -3
- package/src/claude/references/debugger/frontend-verification.md +2 -2
- package/src/claude/references/debugger/log-ci-analysis.md +13 -1
- package/src/claude/references/debugger/parallel-agent-hydration.md +19 -34
- package/src/claude/references/debugger/performance-diagnostics.md +2 -2
- package/src/claude/references/debugger/root-cause-tracing.md +37 -6
- package/src/claude/references/debugger/side-effect-gate.md +3 -1
- package/src/claude/references/debugger/verification-protocol.md +13 -12
- package/src/claude/rules/orchestrator.md +7 -1
- package/src/claude/rules/process-management.md +39 -0
- package/src/claude/rules/review-audit-self-decision.md +48 -0
- package/src/claude/rules/skill-domain-routing.md +26 -24
- package/src/claude/rules/skill-workflow-routing.md +22 -14
- package/src/claude/rules/workflow.md +3 -3
- package/src/claude/runtime.json +1 -0
- package/src/claude/runtime.schema.json +205 -0
- package/src/claude/scripts/generate-skill-catalog.cjs +156 -122
- package/src/claude/scripts/provenance.cjs +18 -5
- package/src/claude/scripts/spec-receipt.cjs +76 -21
- package/src/claude/scripts/spec-resolver.cjs +144 -4
- package/src/claude/scripts/workflow-policy.cjs +1 -1
- package/src/claude/settings/settings.json +16 -0
- package/src/claude/skills/agent-browser/SKILL.md +1 -1
- package/src/claude/skills/ai-multimodal/SKILL.md +1 -1
- package/src/claude/skills/brainstorm/SKILL.md +193 -172
- package/src/claude/skills/brainstorm/references/question-framework.md +105 -167
- package/src/claude/skills/chrome-devtools/SKILL.md +1 -1
- package/src/claude/skills/code-review/SKILL.md +43 -25
- package/src/claude/skills/code-review/references/spec-compliance-review.md +3 -4
- package/src/claude/skills/code-review/references/verification-gate.md +1 -1
- package/src/claude/skills/debug/SKILL.md +48 -19
- package/src/claude/skills/delegate/SKILL.md +1 -1
- package/src/claude/skills/develop/SKILL.md +92 -65
- package/src/claude/skills/develop/references/parallel-waves.md +36 -63
- package/src/claude/skills/develop/references/quality-gate.md +31 -4
- package/src/claude/skills/develop/references/subagent-patterns.md +21 -7
- package/src/claude/skills/docs/SKILL.md +42 -23
- package/src/claude/skills/docs/references/init-workflow.md +4 -4
- package/src/claude/skills/docs/references/reconstruct-workflow.md +6 -6
- package/src/claude/skills/docs/references/standard-docs-workflow.md +6 -2
- package/src/claude/skills/docs/references/summarize-workflow.md +2 -2
- package/src/claude/skills/docs/references/update-workflow.md +9 -7
- package/src/claude/skills/docs/templates/requirements-as-is.md +1 -1
- package/src/claude/skills/docx/SKILL.md +1 -1
- package/src/claude/skills/git/SKILL.md +1 -1
- package/src/claude/skills/git/references/commit-protocols.md +1 -1
- package/src/claude/skills/git/references/finish-branch.md +1 -1
- package/src/claude/skills/hotfix/SKILL.md +159 -170
- package/src/claude/skills/hotfix/references/diagnosis-protocol.md +14 -9
- package/src/claude/skills/hotfix/references/parallel-patterns.md +27 -13
- package/src/claude/skills/hotfix/references/prevention-gate.md +5 -0
- package/src/claude/skills/hotfix/references/review-cycle.md +21 -15
- package/src/claude/skills/hotfix/references/workflow-specialized.md +53 -21
- package/src/claude/skills/inspect/SKILL.md +55 -46
- package/src/claude/skills/inspect/references/internal-inspection.md +21 -5
- package/src/claude/skills/loop/SKILL.md +114 -0
- package/src/claude/skills/loop/references/bounded-loop-protocol.md +104 -0
- package/src/claude/skills/loop/references/metric-and-guard-contract.md +76 -0
- package/src/claude/skills/pdf/SKILL.md +1 -1
- package/src/claude/skills/pptx/SKILL.md +1 -1
- package/src/claude/skills/question/SKILL.md +16 -13
- package/src/claude/skills/research/SKILL.md +70 -43
- package/src/claude/skills/route/SKILL.md +94 -0
- package/src/claude/skills/route/references/agent-timing.md +46 -0
- package/src/claude/skills/route/references/chaining-patterns.md +53 -0
- package/src/claude/skills/route/references/task-taxonomy.md +48 -0
- package/src/claude/skills/specs/SKILL.md +48 -57
- package/src/claude/skills/specs/references/review.md +26 -8
- package/src/claude/skills/specs/references/templates.md +76 -31
- package/src/claude/skills/specs/templates/requirements-init.md +1 -1
- package/src/claude/skills/specs/templates/research.md +2 -2
- package/src/claude/skills/sync/SKILL.md +6 -6
- package/src/claude/skills/sync/references/sync-protocols.md +1 -1
- package/src/claude/skills/test/SKILL.md +120 -120
- package/src/claude/skills/test/references/execution-strategy.md +208 -361
- package/src/claude/skills/test/references/failure-triage.md +55 -121
- package/src/claude/skills/test/references/test-memory.md +20 -34
- package/src/claude/skills/ui-ux-pro-max/SKILL.md +1 -1
- package/src/claude/skills/web-testing/SKILL.md +1 -1
- package/src/claude/skills/xlsx/SKILL.md +1 -1
- package/src/claude/status.cjs +135 -33
- package/src/codex/AGENTS.md +14 -4
- package/src/codex/hooks/docs-sync.cjs +8 -3
- package/src/codex/hooks/lib/hook-context.cjs +18 -4
- package/src/codex/hooks/rules.cjs +29 -1
- package/src/codex/hooks/secret-output-guardrail.cjs +30 -0
- package/src/codex/hooks/spec-gate.cjs +3 -8
- package/src/codex/hooks/spec-state.cjs +34 -5
- package/src/codex/hooks.json +5 -0
- package/src/codex/runtime.json +2 -0
- package/src/common/.env.example +1 -1
- package/src/claude/skills/backend-development/SKILL.md +0 -101
- package/src/claude/skills/backend-development/references/backend-api-design.md +0 -495
- package/src/claude/skills/backend-development/references/backend-architecture.md +0 -454
- package/src/claude/skills/backend-development/references/backend-authentication.md +0 -338
- package/src/claude/skills/backend-development/references/backend-code-quality.md +0 -659
- package/src/claude/skills/backend-development/references/backend-debugging.md +0 -904
- package/src/claude/skills/backend-development/references/backend-devops.md +0 -491
- package/src/claude/skills/backend-development/references/backend-mindset.md +0 -387
- package/src/claude/skills/backend-development/references/backend-performance.md +0 -397
- package/src/claude/skills/backend-development/references/backend-security.md +0 -342
- package/src/claude/skills/backend-development/references/backend-technologies.md +0 -256
- package/src/claude/skills/backend-development/references/backend-testing.md +0 -429
- package/src/claude/skills/devops/.env.example +0 -76
- package/src/claude/skills/devops/SKILL.md +0 -102
- package/src/claude/skills/devops/references/browser-rendering.md +0 -305
- package/src/claude/skills/devops/references/cloudflare-d1-kv.md +0 -123
- package/src/claude/skills/devops/references/cloudflare-platform.md +0 -271
- package/src/claude/skills/devops/references/cloudflare-r2-storage.md +0 -280
- package/src/claude/skills/devops/references/cloudflare-workers-advanced.md +0 -312
- package/src/claude/skills/devops/references/cloudflare-workers-apis.md +0 -309
- package/src/claude/skills/devops/references/cloudflare-workers-basics.md +0 -418
- package/src/claude/skills/devops/references/docker-basics.md +0 -297
- package/src/claude/skills/devops/references/docker-compose.md +0 -292
- package/src/claude/skills/devops/references/gcloud-platform.md +0 -297
- package/src/claude/skills/devops/references/gcloud-services.md +0 -304
- package/src/claude/skills/devops/references/kubernetes-basics.md +0 -95
- package/src/claude/skills/devops/references/kubernetes-helm-advanced.md +0 -70
- package/src/claude/skills/devops/references/kubernetes-helm.md +0 -81
- package/src/claude/skills/devops/references/kubernetes-kubectl.md +0 -74
- package/src/claude/skills/devops/references/kubernetes-security-advanced.md +0 -94
- package/src/claude/skills/devops/references/kubernetes-security.md +0 -89
- package/src/claude/skills/devops/references/kubernetes-troubleshooting-advanced.md +0 -74
- package/src/claude/skills/devops/references/kubernetes-troubleshooting.md +0 -49
- package/src/claude/skills/devops/references/kubernetes-workflows-advanced.md +0 -75
- package/src/claude/skills/devops/references/kubernetes-workflows.md +0 -76
- package/src/claude/skills/devops/scripts/cloudflare_deploy.py +0 -269
- package/src/claude/skills/devops/scripts/docker_optimize.py +0 -332
- package/src/claude/skills/devops/scripts/requirements.txt +0 -20
- package/src/claude/skills/devops/scripts/tests/requirements.txt +0 -3
- package/src/claude/skills/devops/scripts/tests/test_cloudflare_deploy.py +0 -285
- package/src/claude/skills/devops/scripts/tests/test_docker_optimize.py +0 -436
- package/src/claude/skills/frontend-design/SKILL.md +0 -135
- package/src/claude/skills/frontend-design/references/ai-multimodal-overview.md +0 -165
- package/src/claude/skills/frontend-design/references/analysis-best-practices.md +0 -80
- package/src/claude/skills/frontend-design/references/analysis-prompts.md +0 -141
- package/src/claude/skills/frontend-design/references/analysis-techniques.md +0 -118
- package/src/claude/skills/frontend-design/references/animejs.md +0 -396
- package/src/claude/skills/frontend-design/references/anti-slop-rules.md +0 -103
- package/src/claude/skills/frontend-design/references/asset-generation.md +0 -337
- package/src/claude/skills/frontend-design/references/bento-motion-engine.md +0 -142
- package/src/claude/skills/frontend-design/references/design-extraction-overview.md +0 -71
- package/src/claude/skills/frontend-design/references/extraction-best-practices.md +0 -141
- package/src/claude/skills/frontend-design/references/extraction-output-templates.md +0 -162
- package/src/claude/skills/frontend-design/references/extraction-prompts.md +0 -127
- package/src/claude/skills/frontend-design/references/magicui-components.md +0 -129
- package/src/claude/skills/frontend-design/references/performance-guardrails.md +0 -169
- package/src/claude/skills/frontend-design/references/premium-design-patterns.md +0 -93
- package/src/claude/skills/frontend-design/references/redesign-audit-checklist.md +0 -114
- package/src/claude/skills/frontend-design/references/technical-accessibility.md +0 -119
- package/src/claude/skills/frontend-design/references/technical-best-practices.md +0 -97
- package/src/claude/skills/frontend-design/references/technical-optimization.md +0 -44
- package/src/claude/skills/frontend-design/references/technical-overview.md +0 -90
- package/src/claude/skills/frontend-design/references/technical-workflows.md +0 -150
- package/src/claude/skills/frontend-design/references/visual-analysis-overview.md +0 -95
- package/src/claude/skills/frontend-design/references/workflow-3d.md +0 -102
- package/src/claude/skills/frontend-design/references/workflow-describe.md +0 -87
- package/src/claude/skills/frontend-design/references/workflow-immersive.md +0 -87
- package/src/claude/skills/frontend-design/references/workflow-quick.md +0 -57
- package/src/claude/skills/frontend-design/references/workflow-screenshot.md +0 -63
- package/src/claude/skills/frontend-design/references/workflow-video.md +0 -74
- package/src/claude/skills/frontend-development/SKILL.md +0 -406
- package/src/claude/skills/frontend-development/resources/common-patterns.md +0 -331
- package/src/claude/skills/frontend-development/resources/complete-examples.md +0 -872
- package/src/claude/skills/frontend-development/resources/component-patterns.md +0 -502
- package/src/claude/skills/frontend-development/resources/data-fetching.md +0 -767
- package/src/claude/skills/frontend-development/resources/file-organization.md +0 -502
- package/src/claude/skills/frontend-development/resources/loading-and-error-states.md +0 -501
- package/src/claude/skills/frontend-development/resources/performance.md +0 -406
- package/src/claude/skills/frontend-development/resources/routing-guide.md +0 -364
- package/src/claude/skills/frontend-development/resources/styling-guide.md +0 -428
- package/src/claude/skills/frontend-development/resources/typescript-standards.md +0 -418
- package/src/claude/skills/mobile-development/SKILL.md +0 -218
- package/src/claude/skills/mobile-development/references/mobile-android.md +0 -604
- package/src/claude/skills/mobile-development/references/mobile-best-practices.md +0 -544
- package/src/claude/skills/mobile-development/references/mobile-debugging.md +0 -1089
- package/src/claude/skills/mobile-development/references/mobile-frameworks.md +0 -465
- package/src/claude/skills/mobile-development/references/mobile-ios.md +0 -496
- package/src/claude/skills/mobile-development/references/mobile-mindset.md +0 -542
- package/src/claude/skills/react-best-practices/AGENTS.md +0 -2249
- package/src/claude/skills/react-best-practices/README.md +0 -123
- package/src/claude/skills/react-best-practices/SKILL.md +0 -128
- package/src/claude/skills/react-best-practices/metadata.json +0 -15
- package/src/claude/skills/react-best-practices/rules/_sections.md +0 -46
- package/src/claude/skills/react-best-practices/rules/_template.md +0 -28
- package/src/claude/skills/react-best-practices/rules/advanced-event-handler-refs.md +0 -55
- package/src/claude/skills/react-best-practices/rules/advanced-use-latest.md +0 -49
- package/src/claude/skills/react-best-practices/rules/async-api-routes.md +0 -38
- package/src/claude/skills/react-best-practices/rules/async-defer-await.md +0 -80
- package/src/claude/skills/react-best-practices/rules/async-dependencies.md +0 -36
- package/src/claude/skills/react-best-practices/rules/async-parallel.md +0 -28
- package/src/claude/skills/react-best-practices/rules/async-suspense-boundaries.md +0 -99
- package/src/claude/skills/react-best-practices/rules/bundle-barrel-imports.md +0 -59
- package/src/claude/skills/react-best-practices/rules/bundle-conditional.md +0 -31
- package/src/claude/skills/react-best-practices/rules/bundle-defer-third-party.md +0 -49
- package/src/claude/skills/react-best-practices/rules/bundle-dynamic-imports.md +0 -35
- package/src/claude/skills/react-best-practices/rules/bundle-preload.md +0 -50
- package/src/claude/skills/react-best-practices/rules/client-event-listeners.md +0 -74
- package/src/claude/skills/react-best-practices/rules/client-swr-dedup.md +0 -56
- package/src/claude/skills/react-best-practices/rules/js-batch-dom-css.md +0 -82
- package/src/claude/skills/react-best-practices/rules/js-cache-function-results.md +0 -80
- package/src/claude/skills/react-best-practices/rules/js-cache-property-access.md +0 -28
- package/src/claude/skills/react-best-practices/rules/js-cache-storage.md +0 -70
- package/src/claude/skills/react-best-practices/rules/js-combine-iterations.md +0 -32
- package/src/claude/skills/react-best-practices/rules/js-early-exit.md +0 -50
- package/src/claude/skills/react-best-practices/rules/js-hoist-regexp.md +0 -45
- package/src/claude/skills/react-best-practices/rules/js-index-maps.md +0 -37
- package/src/claude/skills/react-best-practices/rules/js-length-check-first.md +0 -49
- package/src/claude/skills/react-best-practices/rules/js-min-max-loop.md +0 -82
- package/src/claude/skills/react-best-practices/rules/js-set-map-lookups.md +0 -24
- package/src/claude/skills/react-best-practices/rules/js-tosorted-immutable.md +0 -57
- package/src/claude/skills/react-best-practices/rules/rendering-activity.md +0 -26
- package/src/claude/skills/react-best-practices/rules/rendering-animate-svg-wrapper.md +0 -47
- package/src/claude/skills/react-best-practices/rules/rendering-conditional-render.md +0 -40
- package/src/claude/skills/react-best-practices/rules/rendering-content-visibility.md +0 -38
- package/src/claude/skills/react-best-practices/rules/rendering-hoist-jsx.md +0 -46
- package/src/claude/skills/react-best-practices/rules/rendering-hydration-no-flicker.md +0 -82
- package/src/claude/skills/react-best-practices/rules/rendering-svg-precision.md +0 -28
- package/src/claude/skills/react-best-practices/rules/rerender-defer-reads.md +0 -39
- package/src/claude/skills/react-best-practices/rules/rerender-dependencies.md +0 -45
- package/src/claude/skills/react-best-practices/rules/rerender-derived-state.md +0 -29
- package/src/claude/skills/react-best-practices/rules/rerender-functional-setstate.md +0 -74
- package/src/claude/skills/react-best-practices/rules/rerender-lazy-state-init.md +0 -58
- package/src/claude/skills/react-best-practices/rules/rerender-memo.md +0 -44
- package/src/claude/skills/react-best-practices/rules/rerender-transitions.md +0 -40
- package/src/claude/skills/react-best-practices/rules/server-after-nonblocking.md +0 -73
- package/src/claude/skills/react-best-practices/rules/server-cache-lru.md +0 -41
- package/src/claude/skills/react-best-practices/rules/server-cache-react.md +0 -26
- package/src/claude/skills/react-best-practices/rules/server-parallel-fetching.md +0 -79
- package/src/claude/skills/react-best-practices/rules/server-serialization.md +0 -38
|
@@ -1,337 +0,0 @@
|
|
|
1
|
-
# Asset Generation Workflow
|
|
2
|
-
|
|
3
|
-
Complete workflow for generating design-aligned visual assets using `ck:ai-multimodal` skill.
|
|
4
|
-
|
|
5
|
-
## Generation Workflow
|
|
6
|
-
|
|
7
|
-
### Step 1: Define Design Context
|
|
8
|
-
|
|
9
|
-
Before generating, extract from the design brief:
|
|
10
|
-
- **Aesthetic direction**: Minimalist? Maximalist? Brutalist? Organic?
|
|
11
|
-
- **Color palette**: Primary colors, accent colors, mood
|
|
12
|
-
- **Typography character**: Modern sans-serif? Elegant serif? Bold display?
|
|
13
|
-
- **Visual tone**: Professional? Playful? Luxury? Raw?
|
|
14
|
-
- **User context**: Who sees this? What problem does it solve?
|
|
15
|
-
|
|
16
|
-
### Step 2: Craft Contextual Prompts
|
|
17
|
-
|
|
18
|
-
Translate design thinking into generation prompts.
|
|
19
|
-
|
|
20
|
-
**Generic (❌ Avoid)**:
|
|
21
|
-
```
|
|
22
|
-
"Modern website hero image"
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
**Design-Driven (✓ Use)**:
|
|
26
|
-
```
|
|
27
|
-
"Brutalist architectural photograph, stark concrete textures,
|
|
28
|
-
dramatic shadows, high contrast black and white, raw unpolished
|
|
29
|
-
surfaces, geometric shapes, monumental scale, inspired by
|
|
30
|
-
1960s Bauhaus, 16:9 aspect ratio"
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
**Prompt Components**:
|
|
34
|
-
1. **Style/Movement**: "Neo-brutalism", "Art Deco", "Organic modernism"
|
|
35
|
-
2. **Visual Elements**: Textures, shapes, composition style
|
|
36
|
-
3. **Color Direction**: "Muted earth tones", "Vibrant neon accents", "Monochromatic"
|
|
37
|
-
4. **Mood/Atmosphere**: "Serene", "Energetic", "Mysterious"
|
|
38
|
-
5. **Technical Specs**: Aspect ratio, composition focus
|
|
39
|
-
6. **References**: "Inspired by [artist/movement]"
|
|
40
|
-
|
|
41
|
-
### Step 3: Generate with Appropriate Model
|
|
42
|
-
|
|
43
|
-
Use `ck:ai-multimodal` skill's image generation capabilities:
|
|
44
|
-
|
|
45
|
-
```bash
|
|
46
|
-
# Standard quality (most cases)
|
|
47
|
-
python scripts/gemini_batch_process.py \
|
|
48
|
-
--task generate \
|
|
49
|
-
--prompt "[your design-driven prompt]" \
|
|
50
|
-
--output docs/assets/hero-image \
|
|
51
|
-
--model imagen-4.0-generate-001 \
|
|
52
|
-
--aspect-ratio 16:9
|
|
53
|
-
|
|
54
|
-
# Ultra quality (production hero images, marketing)
|
|
55
|
-
python scripts/gemini_batch_process.py \
|
|
56
|
-
--task generate \
|
|
57
|
-
--prompt "[your design-driven prompt]" \
|
|
58
|
-
--output docs/assets/hero-ultra \
|
|
59
|
-
--model imagen-4.0-ultra-generate-001 \
|
|
60
|
-
--size 2K
|
|
61
|
-
|
|
62
|
-
# Fast iteration (exploring concepts)
|
|
63
|
-
python scripts/gemini_batch_process.py \
|
|
64
|
-
--task generate \
|
|
65
|
-
--prompt "[your design-driven prompt]" \
|
|
66
|
-
--output docs/assets/concept \
|
|
67
|
-
--model imagen-4.0-fast-generate-001
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
**Model Selection**:
|
|
71
|
-
- **imagen-4.0-generate-001**: Default choice, balanced quality/speed
|
|
72
|
-
- **imagen-4.0-ultra-generate-001**: Final production assets, marketing materials
|
|
73
|
-
- **imagen-4.0-fast-generate-001**: Rapid prototyping, multiple variations
|
|
74
|
-
|
|
75
|
-
**Aspect Ratios**:
|
|
76
|
-
- **16:9**: Hero sections, wide banners
|
|
77
|
-
- **9:16**: Mobile-first, vertical content
|
|
78
|
-
- **1:1**: Square cards, social media
|
|
79
|
-
- **4:3**: Classic layouts, presentations
|
|
80
|
-
- **3:4**: Portrait orientations, mobile screens
|
|
81
|
-
|
|
82
|
-
### Step 4: Evaluate Against Design Standards
|
|
83
|
-
|
|
84
|
-
Use `ck:ai-multimodal` to analyze the generated asset (see `visual-analysis.md` for complete workflow):
|
|
85
|
-
|
|
86
|
-
```bash
|
|
87
|
-
python scripts/gemini_batch_process.py \
|
|
88
|
-
--files docs/assets/hero-image.png \
|
|
89
|
-
--task analyze \
|
|
90
|
-
--prompt "Evaluate this image for:
|
|
91
|
-
1. Visual coherence with [aesthetic direction]
|
|
92
|
-
2. Color harmony and contrast
|
|
93
|
-
3. Composition and balance
|
|
94
|
-
4. Suitability for overlaying text
|
|
95
|
-
5. Professional quality (rate 1-10)
|
|
96
|
-
6. Specific weaknesses or improvements needed" \
|
|
97
|
-
--output docs/assets/hero-evaluation.md \
|
|
98
|
-
--model gemma-4-31b-it
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
### Step 5: Iterate or Integrate
|
|
102
|
-
|
|
103
|
-
**If evaluation score < 7/10 or doesn't meet standards**:
|
|
104
|
-
1. Identify specific issues (color, composition, mood, technical)
|
|
105
|
-
2. Refine prompt with improvements
|
|
106
|
-
3. Regenerate with adjusted parameters
|
|
107
|
-
4. Consider using `ck:media-processing` skill for post-generation adjustments
|
|
108
|
-
|
|
109
|
-
**If meets standards**:
|
|
110
|
-
1. Optimize for web (compress, format conversion)
|
|
111
|
-
2. Create responsive variants if needed
|
|
112
|
-
3. Document asset usage guidelines
|
|
113
|
-
4. Integrate into frontend implementation
|
|
114
|
-
|
|
115
|
-
## Design Pattern Examples
|
|
116
|
-
|
|
117
|
-
### Pattern 1: Minimalist Background Texture
|
|
118
|
-
|
|
119
|
-
**Design Context**: Clean, refined interface with generous white space
|
|
120
|
-
|
|
121
|
-
**Prompt Strategy**:
|
|
122
|
-
```
|
|
123
|
-
"Subtle paper texture, off-white color (#F8F8F8), barely visible
|
|
124
|
-
grain pattern, high-end stationery feel, minimal contrast,
|
|
125
|
-
professional and clean, 1:1 aspect ratio for tiling"
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
**Use Case**: Background for minimalist product pages, portfolio sites
|
|
129
|
-
|
|
130
|
-
### Pattern 2: Maximalist Hero Section
|
|
131
|
-
|
|
132
|
-
**Design Context**: Bold, energetic landing page with vibrant colors
|
|
133
|
-
|
|
134
|
-
**Prompt Strategy**:
|
|
135
|
-
```
|
|
136
|
-
"Explosive color gradients, neon pink to electric blue,
|
|
137
|
-
holographic reflections, dynamic diagonal composition,
|
|
138
|
-
retrofuturistic aesthetic, vaporwave influence, high energy,
|
|
139
|
-
layered transparency effects, 16:9 cinematic"
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
**Use Case**: Hero section for creative agencies, entertainment platforms
|
|
143
|
-
|
|
144
|
-
### Pattern 3: Brutalist Geometric Pattern
|
|
145
|
-
|
|
146
|
-
**Design Context**: Raw, bold interface with strong typography
|
|
147
|
-
|
|
148
|
-
**Prompt Strategy**:
|
|
149
|
-
```
|
|
150
|
-
"Monochromatic geometric pattern, overlapping rectangles,
|
|
151
|
-
stark black and white, high contrast, Swiss design influence,
|
|
152
|
-
grid-based composition, architectural precision, repeatable
|
|
153
|
-
pattern for backgrounds"
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
**Use Case**: Background pattern for design studios, architecture firms
|
|
157
|
-
|
|
158
|
-
### Pattern 4: Organic Natural Elements
|
|
159
|
-
|
|
160
|
-
**Design Context**: Wellness brand, calming user experience
|
|
161
|
-
|
|
162
|
-
**Prompt Strategy**:
|
|
163
|
-
```
|
|
164
|
-
"Soft botanical watercolor, sage green and cream tones,
|
|
165
|
-
gentle leaf shadows, natural light quality, serene atmosphere,
|
|
166
|
-
minimal detail for text overlay, 3:4 portrait orientation"
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
**Use Case**: Hero section for wellness brands, eco-friendly products
|
|
170
|
-
|
|
171
|
-
### Pattern 5: Retro-Futuristic
|
|
172
|
-
|
|
173
|
-
**Design Context**: Tech product with nostalgic twist
|
|
174
|
-
|
|
175
|
-
**Prompt Strategy**:
|
|
176
|
-
```
|
|
177
|
-
"80s computer graphics aesthetic, wireframe grids, cyan and magenta
|
|
178
|
-
gradients, digital sunrise, Tron-inspired, geometric precision,
|
|
179
|
-
nostalgic future vision, 16:9 widescreen"
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
**Use Case**: SaaS landing pages, tech conferences, gaming platforms
|
|
183
|
-
|
|
184
|
-
### Pattern 6: Editorial Magazine Style
|
|
185
|
-
|
|
186
|
-
**Design Context**: Content-heavy site with strong visual hierarchy
|
|
187
|
-
|
|
188
|
-
**Prompt Strategy**:
|
|
189
|
-
```
|
|
190
|
-
"High-contrast editorial photography, dramatic side lighting,
|
|
191
|
-
stark shadows, black and white, fashion magazine quality,
|
|
192
|
-
strong vertical composition, 3:4 portrait for text layout"
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
**Use Case**: Blog headers, news sites, content platforms
|
|
196
|
-
|
|
197
|
-
## Prompt Engineering Best Practices
|
|
198
|
-
|
|
199
|
-
### 1. Be Specific About Style
|
|
200
|
-
❌ "Modern design"
|
|
201
|
-
✓ "Bauhaus-inspired geometric abstraction with primary colors"
|
|
202
|
-
|
|
203
|
-
### 2. Define Color Precisely
|
|
204
|
-
❌ "Colorful"
|
|
205
|
-
✓ "Vibrant sunset palette: coral (#FF6B6B), amber (#FFB84D), violet (#A66FF0)"
|
|
206
|
-
|
|
207
|
-
### 3. Specify Composition
|
|
208
|
-
❌ "Nice layout"
|
|
209
|
-
✓ "Rule of thirds composition, subject left-aligned, negative space right for text overlay"
|
|
210
|
-
|
|
211
|
-
### 4. Reference Movements/Artists
|
|
212
|
-
❌ "Artistic"
|
|
213
|
-
✓ "Inspired by Bauhaus geometric abstraction and Swiss International Style"
|
|
214
|
-
|
|
215
|
-
### 5. Technical Requirements First
|
|
216
|
-
Always include: aspect ratio, resolution needs, intended use case
|
|
217
|
-
|
|
218
|
-
### 6. Iterate Strategically
|
|
219
|
-
- First generation: Broad aesthetic exploration
|
|
220
|
-
- Second generation: Refine color and composition
|
|
221
|
-
- Third generation: Fine-tune details and mood
|
|
222
|
-
|
|
223
|
-
## Common Pitfalls to Avoid
|
|
224
|
-
|
|
225
|
-
### ❌ Generic Stock Photo Aesthetics
|
|
226
|
-
Don't prompt: "Professional business team working together"
|
|
227
|
-
Instead: Design-specific, contextual imagery that serves the interface
|
|
228
|
-
|
|
229
|
-
### ❌ Overcomplex Generated Images
|
|
230
|
-
Generated assets that compete with UI elements create visual chaos
|
|
231
|
-
Keep backgrounds subtle enough for text/button overlay
|
|
232
|
-
|
|
233
|
-
### ❌ Inconsistent Visual Language
|
|
234
|
-
Each generated asset should feel part of the same design system
|
|
235
|
-
Maintain color palette, visual style, mood consistency
|
|
236
|
-
|
|
237
|
-
### ❌ Ignoring Integration Context
|
|
238
|
-
Assets aren't standalone—consider how they work with:
|
|
239
|
-
- Typography overlays
|
|
240
|
-
- Interactive elements (buttons, forms)
|
|
241
|
-
- Navigation and UI chrome
|
|
242
|
-
- Responsive behavior across devices
|
|
243
|
-
|
|
244
|
-
## Responsive Asset Strategy
|
|
245
|
-
|
|
246
|
-
### Desktop-First Approach
|
|
247
|
-
1. Generate primary asset at 16:9 (desktop hero)
|
|
248
|
-
2. Generate mobile variant at 9:16 with same prompt
|
|
249
|
-
3. Ensure focal point works in both orientations
|
|
250
|
-
|
|
251
|
-
### Mobile-First Approach
|
|
252
|
-
1. Generate primary asset at 9:16 (mobile hero)
|
|
253
|
-
2. Generate desktop variant at 16:9 with same prompt
|
|
254
|
-
3. Test that composition scales effectively
|
|
255
|
-
|
|
256
|
-
### Variant Generation
|
|
257
|
-
```bash
|
|
258
|
-
# Desktop (16:9)
|
|
259
|
-
python scripts/gemini_batch_process.py \
|
|
260
|
-
--task generate \
|
|
261
|
-
--prompt "[prompt]" \
|
|
262
|
-
--output docs/assets/hero-desktop \
|
|
263
|
-
--model imagen-4.0-generate-001 \
|
|
264
|
-
--aspect-ratio 16:9
|
|
265
|
-
|
|
266
|
-
# Mobile (9:16)
|
|
267
|
-
python scripts/gemini_batch_process.py \
|
|
268
|
-
--task generate \
|
|
269
|
-
--prompt "[same prompt]" \
|
|
270
|
-
--output docs/assets/hero-mobile \
|
|
271
|
-
--model imagen-4.0-generate-001 \
|
|
272
|
-
--aspect-ratio 9:16
|
|
273
|
-
|
|
274
|
-
# Square (1:1)
|
|
275
|
-
python scripts/gemini_batch_process.py \
|
|
276
|
-
--task generate \
|
|
277
|
-
--prompt "[same prompt]" \
|
|
278
|
-
--output docs/assets/hero-square \
|
|
279
|
-
--model imagen-4.0-generate-001 \
|
|
280
|
-
--aspect-ratio 1:1
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
## Model Cost Optimization
|
|
284
|
-
|
|
285
|
-
**Imagen 4 Pricing** (as of 2024):
|
|
286
|
-
- Standard: ~$0.04 per image
|
|
287
|
-
- Ultra: ~$0.08 per image
|
|
288
|
-
- Fast: ~$0.02 per image
|
|
289
|
-
|
|
290
|
-
**Optimization Strategy**:
|
|
291
|
-
1. Use Fast model for exploration (3-5 variations)
|
|
292
|
-
2. Select best direction, generate with Standard model
|
|
293
|
-
3. Use Ultra only for final production assets
|
|
294
|
-
4. Batch generate variations in single session
|
|
295
|
-
|
|
296
|
-
## Complete Example Workflow
|
|
297
|
-
|
|
298
|
-
```bash
|
|
299
|
-
# 1. Fast exploration (3 variations)
|
|
300
|
-
python scripts/gemini_batch_process.py \
|
|
301
|
-
--task generate \
|
|
302
|
-
--prompt "Minimalist mountain landscape, muted blue-gray tones,
|
|
303
|
-
fog layers, serene morning atmosphere, clean for text overlay, 16:9" \
|
|
304
|
-
--output docs/assets/concept-1 \
|
|
305
|
-
--model imagen-4.0-fast-generate-001 \
|
|
306
|
-
--aspect-ratio 16:9
|
|
307
|
-
|
|
308
|
-
# 2. Analyze best variation
|
|
309
|
-
python scripts/gemini_batch_process.py \
|
|
310
|
-
--files docs/assets/concept-1.png \
|
|
311
|
-
--task analyze \
|
|
312
|
-
--prompt "Rate 1-10 for aesthetic quality, color harmony, text overlay suitability" \
|
|
313
|
-
--output docs/assets/analysis-1.md \
|
|
314
|
-
--model gemma-4-31b-it
|
|
315
|
-
|
|
316
|
-
# 3. If score ≥ 7/10, generate production version
|
|
317
|
-
python scripts/gemini_batch_process.py \
|
|
318
|
-
--task generate \
|
|
319
|
-
--prompt "[refined prompt based on analysis]" \
|
|
320
|
-
--output docs/assets/hero-final \
|
|
321
|
-
--model imagen-4.0-generate-001 \
|
|
322
|
-
--aspect-ratio 16:9
|
|
323
|
-
|
|
324
|
-
# 4. Generate mobile variant
|
|
325
|
-
python scripts/gemini_batch_process.py \
|
|
326
|
-
--task generate \
|
|
327
|
-
--prompt "[same refined prompt]" \
|
|
328
|
-
--output docs/assets/hero-mobile \
|
|
329
|
-
--model imagen-4.0-generate-001 \
|
|
330
|
-
--aspect-ratio 9:16
|
|
331
|
-
```
|
|
332
|
-
|
|
333
|
-
## Next Steps
|
|
334
|
-
|
|
335
|
-
- **Verify quality**: See `visual-analysis.md` for comprehensive analysis workflow
|
|
336
|
-
- **Optimize assets**: See `technical-guide.md` for file optimization and integration
|
|
337
|
-
- **Extract inspiration**: See `design-extraction.md` to learn from existing designs
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
# Bento 2.0 Motion Engine
|
|
2
|
-
|
|
3
|
-
Architecture for modern SaaS dashboards and feature sections. Goes beyond static cards — enforces a "Vercel-core meets Dribbble-clean" aesthetic with perpetual physics.
|
|
4
|
-
|
|
5
|
-
Use when generating: SaaS dashboards, feature showcase grids, marketing bento sections, product landing pages with interactive demos.
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## Core Design Philosophy
|
|
10
|
-
|
|
11
|
-
**Aesthetic:** High-end, minimal, functional. Every card feels alive.
|
|
12
|
-
|
|
13
|
-
**Palette:**
|
|
14
|
-
- Background: `#f9fafb` (light) or `#050505` (dark)
|
|
15
|
-
- Cards: pure white `#ffffff` (light) / vantablack with `bg-white/5` (dark)
|
|
16
|
-
- Card borders: `border border-slate-200/50` (light) / `border border-white/10` (dark)
|
|
17
|
-
|
|
18
|
-
**Surfaces:**
|
|
19
|
-
- All major containers use `rounded-[2.5rem]`
|
|
20
|
-
- Diffusion shadow: `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]` — depth without clutter
|
|
21
|
-
- Card titles and descriptions sit **outside and below** the card (gallery-style presentation)
|
|
22
|
-
- Card interior: generous `p-8` or `p-10` padding
|
|
23
|
-
|
|
24
|
-
**Typography:**
|
|
25
|
-
- Font stack: `Geist`, `Satoshi`, or `Cabinet Grotesk` only
|
|
26
|
-
- Header tracking: `tracking-tight`
|
|
27
|
-
- Never Inter in a Bento context
|
|
28
|
-
|
|
29
|
-
**Double-Bezel structure for premium cards:**
|
|
30
|
-
- Outer shell: `bg-black/5 ring-1 ring-black/5 p-1.5 rounded-[2rem]`
|
|
31
|
-
- Inner core: own background + `shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]` + `rounded-[calc(2rem-0.375rem)]`
|
|
32
|
-
|
|
33
|
-
---
|
|
34
|
-
|
|
35
|
-
## Animation Engine Specs
|
|
36
|
-
|
|
37
|
-
All cards MUST contain **Perpetual Micro-Interactions**. The dashboard must always feel alive.
|
|
38
|
-
|
|
39
|
-
**Spring Physics (no linear easing):**
|
|
40
|
-
```js
|
|
41
|
-
// Use for all interactive elements
|
|
42
|
-
{ type: "spring", stiffness: 100, damping: 20 }
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
**Layout Transitions:**
|
|
46
|
-
- Use Framer Motion `layout` and `layoutId` props for smooth reordering, resizing, and shared element transitions
|
|
47
|
-
|
|
48
|
-
**Infinite Loops:**
|
|
49
|
-
- Every card has an active state that loops infinitely: Pulse, Typewriter, Float, or Carousel
|
|
50
|
-
|
|
51
|
-
**Performance isolation (critical):**
|
|
52
|
-
- Every perpetual animation MUST be wrapped in `React.memo`
|
|
53
|
-
- Extract each animated card as its own isolated leaf `'use client'` component
|
|
54
|
-
- Never trigger re-renders in the parent layout
|
|
55
|
-
|
|
56
|
-
**AnimatePresence:**
|
|
57
|
-
- Wrap all dynamic lists — enables proper enter/exit animations
|
|
58
|
-
|
|
59
|
-
---
|
|
60
|
-
|
|
61
|
-
## Grid Structure
|
|
62
|
-
|
|
63
|
-
Typical layout: Row 1 = 3 columns | Row 2 = 2 columns (70/30 split)
|
|
64
|
-
|
|
65
|
-
```jsx
|
|
66
|
-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
67
|
-
{/* Row 1: 3 equal cards */}
|
|
68
|
-
<IntelligentListCard />
|
|
69
|
-
<CommandInputCard />
|
|
70
|
-
<LiveStatusCard />
|
|
71
|
-
</div>
|
|
72
|
-
<div className="grid grid-cols-1 md:grid-cols-[70%_30%] gap-6 mt-6">
|
|
73
|
-
{/* Row 2: wide data stream + contextual UI */}
|
|
74
|
-
<WideDataStreamCard />
|
|
75
|
-
<ContextualUICard />
|
|
76
|
-
</div>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
Mobile: all cards collapse to `grid-cols-1` with `gap-6`. No horizontal overflow.
|
|
80
|
-
|
|
81
|
-
---
|
|
82
|
-
|
|
83
|
-
## The 5 Card Archetypes
|
|
84
|
-
|
|
85
|
-
### 1. Intelligent List
|
|
86
|
-
A vertical stack of items with an infinite auto-sorting loop.
|
|
87
|
-
|
|
88
|
-
- Items swap positions using `layoutId` — simulates AI prioritizing tasks in real-time
|
|
89
|
-
- Smooth position swaps on a ~3s interval
|
|
90
|
-
- Spring-based position transitions for a weighted, physical feel
|
|
91
|
-
- Use case: task lists, priority queues, leaderboards
|
|
92
|
-
|
|
93
|
-
### 2. Command Input
|
|
94
|
-
A search/AI bar with a multi-step Typewriter Effect.
|
|
95
|
-
|
|
96
|
-
- Cycles through 3-5 complex prompts
|
|
97
|
-
- Blinking cursor between prompts
|
|
98
|
-
- "Processing" state: shimmering loading gradient on the input
|
|
99
|
-
- On "completion": brief checkmark animation before next cycle
|
|
100
|
-
- Use case: AI search demos, command palette teasers
|
|
101
|
-
|
|
102
|
-
### 3. Live Status
|
|
103
|
-
A scheduling or status interface with breathing indicators.
|
|
104
|
-
|
|
105
|
-
- Status dots with infinite `scale` pulse animation (`1.0 → 1.2 → 1.0`, 2s loop)
|
|
106
|
-
- Pop-up notification badge with overshoot spring: appears, stays 3s, vanishes
|
|
107
|
-
- Badge entrance: `scale: [0, 1.2, 1]` with overshoot spring physics
|
|
108
|
-
- Use case: scheduling UIs, monitoring dashboards, live feed indicators
|
|
109
|
-
|
|
110
|
-
### 4. Wide Data Stream
|
|
111
|
-
A horizontal infinite carousel of data cards or metrics.
|
|
112
|
-
|
|
113
|
-
- Seamless loop using `x: ["0%", "-50%"]` with duplicate items for continuity
|
|
114
|
-
- Speed feels effortless — not urgent, not slow (~20-30s per full cycle)
|
|
115
|
-
- Cards show metrics, user avatars, status chips, mini sparklines
|
|
116
|
-
- Use case: social proof logos, metric streams, activity feeds
|
|
117
|
-
|
|
118
|
-
### 5. Contextual UI (Focus Mode)
|
|
119
|
-
A document or content view that highlights and reveals tools.
|
|
120
|
-
|
|
121
|
-
- Staggered text block highlight animation (sequential word/line highlights, 300ms stagger)
|
|
122
|
-
- After highlight completes: float-in of a floating action toolbar
|
|
123
|
-
- Toolbar entrance: `y: [20, 0]` + `opacity: [0, 1]` with spring, staggered micro-icons
|
|
124
|
-
- Toolbar holds 3-5 action icons with individual hover states
|
|
125
|
-
- Use case: editor demos, AI annotation tools, document review flows
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
## Pre-Flight Checklist
|
|
130
|
-
|
|
131
|
-
Before shipping a Bento section:
|
|
132
|
-
|
|
133
|
-
- [ ] Global state used only to avoid deep prop-drilling, not arbitrarily
|
|
134
|
-
- [ ] Mobile layout collapses to single column with `w-full px-4`
|
|
135
|
-
- [ ] Full-height sections use `min-h-[100dvh]` not `h-screen`
|
|
136
|
-
- [ ] All `useEffect` animations have cleanup functions
|
|
137
|
-
- [ ] Empty, loading, and error states provided for each card
|
|
138
|
-
- [ ] Generic card borders replaced with spacing/dividers where appropriate
|
|
139
|
-
- [ ] Every perpetual animation isolated in its own memoized Client Component
|
|
140
|
-
- [ ] No `window.addEventListener('scroll')` — use `whileInView` or `IntersectionObserver`
|
|
141
|
-
- [ ] No arbitrary z-index values
|
|
142
|
-
- [ ] `backdrop-blur` only on fixed/sticky elements, never scrolling cards
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
# Extract Design Guidelines from Existing Assets
|
|
2
|
-
|
|
3
|
-
Reverse-engineer design principles from existing images or videos to establish design guidelines.
|
|
4
|
-
|
|
5
|
-
## Purpose
|
|
6
|
-
|
|
7
|
-
- Analyze competitor designs to understand their approach
|
|
8
|
-
- Extract design systems from inspiration screenshots
|
|
9
|
-
- Learn from high-quality design examples
|
|
10
|
-
- Create documented guidelines based on visual analysis
|
|
11
|
-
- Establish consistent aesthetic direction from references
|
|
12
|
-
|
|
13
|
-
## Use Cases
|
|
14
|
-
|
|
15
|
-
- Analyzing competitor websites or apps
|
|
16
|
-
- Learning from inspiration galleries (Dribbble, Awwwards, Mobbin)
|
|
17
|
-
- Extracting design systems from brand materials
|
|
18
|
-
- Reverse-engineering successful interfaces
|
|
19
|
-
- Creating design documentation from visual references
|
|
20
|
-
|
|
21
|
-
## Quick Workflows
|
|
22
|
-
|
|
23
|
-
### Single Image Analysis
|
|
24
|
-
```bash
|
|
25
|
-
python scripts/gemini_batch_process.py \
|
|
26
|
-
--files docs/inspiration/reference-design.png \
|
|
27
|
-
--task analyze \
|
|
28
|
-
--prompt "[see extraction-prompts.md for detailed prompt]" \
|
|
29
|
-
--output docs/design-guidelines/extracted-design-system.md \
|
|
30
|
-
--model gemma-4-31b-it
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
### Multi-Screen System Extraction
|
|
34
|
-
```bash
|
|
35
|
-
python scripts/gemini_batch_process.py \
|
|
36
|
-
--files docs/inspiration/home.png docs/inspiration/about.png \
|
|
37
|
-
--task analyze \
|
|
38
|
-
--prompt "[see extraction-prompts.md for multi-screen prompt]" \
|
|
39
|
-
--output docs/design-guidelines/complete-design-system.md \
|
|
40
|
-
--model gemma-4-31b-it
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
### Video Motion Analysis
|
|
44
|
-
```bash
|
|
45
|
-
python scripts/gemini_batch_process.py \
|
|
46
|
-
--files docs/inspiration/interaction-demo.mp4 \
|
|
47
|
-
--task analyze \
|
|
48
|
-
--prompt "[see extraction-prompts.md for motion prompt]" \
|
|
49
|
-
--output docs/design-guidelines/motion-system.md \
|
|
50
|
-
--model gemma-4-31b-it
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### Competitive Analysis
|
|
54
|
-
```bash
|
|
55
|
-
python scripts/gemini_batch_process.py \
|
|
56
|
-
--files competitor-a.png competitor-b.png competitor-c.png \
|
|
57
|
-
--task analyze \
|
|
58
|
-
--prompt "[see extraction-prompts.md for competitive prompt]" \
|
|
59
|
-
--output docs/design-guidelines/competitive-analysis.md \
|
|
60
|
-
--model gemma-4-31b-it
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## Detailed References
|
|
64
|
-
|
|
65
|
-
- `extraction-prompts.md` - All extraction prompt templates
|
|
66
|
-
- `extraction-best-practices.md` - Capture quality, analysis tips
|
|
67
|
-
- `extraction-output-templates.md` - Documentation formats
|
|
68
|
-
|
|
69
|
-
## Integration
|
|
70
|
-
|
|
71
|
-
After extraction, use guidelines with `asset-generation.md` for generating design-aligned visual assets.
|
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
# Extraction Best Practices
|
|
2
|
-
|
|
3
|
-
Guidelines for capturing and analyzing design references effectively.
|
|
4
|
-
|
|
5
|
-
## Capture Quality Guidelines
|
|
6
|
-
|
|
7
|
-
### Screenshot Requirements
|
|
8
|
-
- High-resolution (minimum 1920px wide for desktop)
|
|
9
|
-
- Accurate color reproduction (disable browser extensions that alter colors)
|
|
10
|
-
- Actual viewport size, not full-page scrolls
|
|
11
|
-
- Device-specific resolutions (desktop 1920x1080, mobile 390x844)
|
|
12
|
-
- Multiple states: default, hover, active, responsive breakpoints
|
|
13
|
-
|
|
14
|
-
### Multiple Examples
|
|
15
|
-
- Analyze 3-5 screens minimum for pattern recognition
|
|
16
|
-
- Include different page types (home, product, about, contact)
|
|
17
|
-
- Single screenshots miss patterns
|
|
18
|
-
- Capture from same site to identify consistency
|
|
19
|
-
|
|
20
|
-
## Analysis Best Practices
|
|
21
|
-
|
|
22
|
-
### 1. Demand Specifics
|
|
23
|
-
❌ Accept: "Uses blue and gray colors"
|
|
24
|
-
✓ Demand: "Primary: #1E40AF, Secondary: #6B7280, Accent: #F59E0B"
|
|
25
|
-
|
|
26
|
-
❌ Accept: "Modern sans-serif font"
|
|
27
|
-
✓ Demand: "Inter, weight 600, 48px for h1, tracking -0.02em"
|
|
28
|
-
|
|
29
|
-
### 2. Document Rationale
|
|
30
|
-
Understand *why* design decisions work, not just *what* they are:
|
|
31
|
-
- Why does this color palette create trust?
|
|
32
|
-
- Why does this spacing scale improve readability?
|
|
33
|
-
- Why does this typography hierarchy guide user attention?
|
|
34
|
-
|
|
35
|
-
### 3. Create Actionable Guidelines
|
|
36
|
-
Output should be directly implementable in code:
|
|
37
|
-
|
|
38
|
-
```css
|
|
39
|
-
/* Immediately usable CSS from extraction */
|
|
40
|
-
:root {
|
|
41
|
-
--font-display: 'Bebas Neue', sans-serif;
|
|
42
|
-
--font-body: 'Inter', sans-serif;
|
|
43
|
-
|
|
44
|
-
--color-primary-600: #1E40AF;
|
|
45
|
-
--color-accent-500: #F59E0B;
|
|
46
|
-
|
|
47
|
-
--spacing-xs: 4px;
|
|
48
|
-
--spacing-sm: 8px;
|
|
49
|
-
--spacing-md: 16px;
|
|
50
|
-
--spacing-lg: 24px;
|
|
51
|
-
|
|
52
|
-
--radius-sm: 4px;
|
|
53
|
-
--radius-md: 8px;
|
|
54
|
-
|
|
55
|
-
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|
56
|
-
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
|
|
57
|
-
}
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
### 4. Cross-Reference
|
|
61
|
-
- Validate font predictions against Google Fonts library
|
|
62
|
-
- Use font identification tools (WhatFont, Font Ninja) for accuracy
|
|
63
|
-
- Manually verify extracted colors with eyedropper tools
|
|
64
|
-
|
|
65
|
-
### 5. Iterate Analysis
|
|
66
|
-
First pass may miss subtleties:
|
|
67
|
-
- Run initial comprehensive analysis
|
|
68
|
-
- Review output, identify gaps
|
|
69
|
-
- Run focused follow-up queries for specific elements
|
|
70
|
-
|
|
71
|
-
## Advanced Techniques
|
|
72
|
-
|
|
73
|
-
### Design System Mining
|
|
74
|
-
Extract complete design system from single brand (10+ screens):
|
|
75
|
-
|
|
76
|
-
```bash
|
|
77
|
-
python scripts/gemini_batch_process.py \
|
|
78
|
-
--files docs/inspiration/brand/*.png \
|
|
79
|
-
--task analyze \
|
|
80
|
-
--prompt "Extract complete, production-ready design system:
|
|
81
|
-
- All color tokens (20+ colors)
|
|
82
|
-
- All typography specs (sizes, weights, line-heights)
|
|
83
|
-
- All spacing tokens
|
|
84
|
-
- All component variants
|
|
85
|
-
- All animation timings
|
|
86
|
-
Output as CSS variables ready for implementation." \
|
|
87
|
-
--output docs/design-guidelines/brand-design-system.md \
|
|
88
|
-
--model gemma-4-31b-it
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
### Trend Analysis
|
|
92
|
-
Analyze multiple top designs to identify current trends:
|
|
93
|
-
|
|
94
|
-
```bash
|
|
95
|
-
python scripts/gemini_batch_process.py \
|
|
96
|
-
--files docs/inspiration/awwwards-*.png \
|
|
97
|
-
--task analyze \
|
|
98
|
-
--prompt "Trend analysis across 10 award-winning designs:
|
|
99
|
-
1. Dominant aesthetic movements
|
|
100
|
-
2. Common color strategies
|
|
101
|
-
3. Typography trends
|
|
102
|
-
4. Layout innovations
|
|
103
|
-
5. Animation patterns
|
|
104
|
-
Identify what's trending in 2024 web design." \
|
|
105
|
-
--output docs/design-guidelines/trend-analysis.md \
|
|
106
|
-
--model gemma-4-31b-it
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### Historical Evolution
|
|
110
|
-
Track design evolution of single brand over time:
|
|
111
|
-
|
|
112
|
-
```bash
|
|
113
|
-
python scripts/gemini_batch_process.py \
|
|
114
|
-
--files docs/inspiration/brand-2020.png docs/inspiration/brand-2024.png \
|
|
115
|
-
--task analyze \
|
|
116
|
-
--prompt "Compare 2020 vs 2024 design evolution:
|
|
117
|
-
1. What changed and why
|
|
118
|
-
2. What remained consistent (brand identity)
|
|
119
|
-
3. How trends influenced changes
|
|
120
|
-
4. Lessons for our design evolution" \
|
|
121
|
-
--output docs/design-guidelines/evolution-analysis.md \
|
|
122
|
-
--model gemma-4-31b-it
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
## Common Pitfalls
|
|
126
|
-
|
|
127
|
-
### ❌ Surface-Level Analysis
|
|
128
|
-
"Uses blue colors and sans-serif fonts"
|
|
129
|
-
**Fix**: Demand specifics—hex codes, font names, size values
|
|
130
|
-
|
|
131
|
-
### ❌ Missing Context
|
|
132
|
-
Extracting design without understanding target audience or purpose
|
|
133
|
-
**Fix**: Research brand context before analysis
|
|
134
|
-
|
|
135
|
-
### ❌ Blind Copying
|
|
136
|
-
Extracting and applying design 1:1 to your project
|
|
137
|
-
**Fix**: Extract principles, adapt to your unique context
|
|
138
|
-
|
|
139
|
-
### ❌ Single Source
|
|
140
|
-
Learning from one example only
|
|
141
|
-
**Fix**: Analyze 3-5 examples to identify patterns vs. anomalies
|