commit 4802f2c3b25acc39c15a441717f4d404d8bcb607 Author: software-ai-life Date: Fri Apr 24 17:02:19 2026 +0800 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..aa82b97 --- /dev/null +++ b/README.md @@ -0,0 +1,105 @@ +# Awesome PPT Design Skill + +Custom Codex skills for generating polished PowerPoint decks with `ppt-master`. This collection focuses on high-end editorial presentation design, Japanese minimalist layout systems, and soft modern 3D claymorphism. + +## Cover Previews + +### Japanese Lifestyle Editorial + +![Japanese Lifestyle Editorial cover](japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/01_cover.svg) + +### Washi Paper & Soft Glow + +![Washi Paper & Soft Glow cover](japanese-style-ppt-skill/assets/examples/washi-soft-glow/01_cover.svg) + +### Soft 3D / Claymorphism + +![Soft 3D Claymorphism cover](soft-3d-clay-ppt-skill/assets/examples/01_cover.svg) + +## Included Skills + +### `japanese-style-ppt-skill` + +Japanese editorial presentation design with two house styles: + +- **Washi Paper & Soft Glow**: soft off-white washi texture, indigo restraint, thin gray lines, quiet geometry, professional warmth. +- **Japanese Lifestyle Editorial**: stark white background, bold elegant sans-serif headings, burnt orange accents, structured grid, asymmetric edge-pressed imagery. + +Best for brand stories, human-centered strategy, product narratives, business proposals, and polished technical storytelling. + +### `soft-3d-clay-ppt-skill` + +Minimalist professional PPT design with a soft 3D / claymorphism aesthetic: + +- Warm beige background `#FDF5E6` +- Sage green `#B2AC88` +- Morandi warm pink `#DBADAD` +- Soft matte 3D shapes in corners and gutters +- Airy UI-like layouts with soft rounded panels + +Best for modern product decks, friendly technical explainers, lightweight business proposals, and presentations that need warmth without losing professionalism. + +## Repository Structure + +```text +. +├── japanese-style-ppt-skill/ +│ ├── SKILL.md +│ ├── agents/openai.yaml +│ ├── assets/ +│ │ ├── template.html +│ │ ├── style2-template.html +│ │ └── examples/ +│ └── references/ +│ ├── style-system.md +│ ├── japanese-lifestyle-editorial.md +│ ├── slide-patterns.md +│ ├── ppt-master-integration.md +│ └── qa-checklist.md +└── soft-3d-clay-ppt-skill/ + ├── SKILL.md + ├── agents/openai.yaml + ├── assets/ + │ ├── template.html + │ └── examples/ + └── references/ + ├── style-system.md + ├── slide-patterns.md + ├── ppt-master-integration.md + └── qa-checklist.md +``` + +## Usage + +Copy the skill folders into your Codex skills directory or reference them from a workspace where Codex can read local skills. + +Example prompts: + +```text +Use japanese-style-ppt-skill and follow ppt-master to create a 5-page PPT from this PDF. +``` + +```text +Use soft-3d-clay-ppt-skill to make the deck more lively, modern, and less rigid. +``` + +When using `ppt-master`, the skill should be treated as the visual style layer for: + +- Eight Confirmations +- `design_spec.md` +- `spec_lock.md` +- SVG page generation +- visual QA and export + +## Design Principles + +- Keep the deck professional and readable first. +- Use style as a system, not decoration. +- Keep colors restrained and consistent with each skill's palette. +- Use icons sparingly. +- Preserve negative space. +- For `ppt-master`, keep every generated SVG aligned with `spec_lock.md`. + +## Notes + +The SVG examples in `assets/examples/` are lightweight visual references. They are meant to show style direction, not act as fixed templates. For real decks, adapt layout and density to the source material. diff --git a/japanese-style-ppt-skill/SKILL.md b/japanese-style-ppt-skill/SKILL.md new file mode 100644 index 0000000..0722ad8 --- /dev/null +++ b/japanese-style-ppt-skill/SKILL.md @@ -0,0 +1,75 @@ +--- +name: japanese-style-ppt-skill +description: Create or redesign PowerPoint/PPTX decks in the user's Japanese editorial styles: (1) "Washi Paper & Soft Glow" with washi texture, indigo restraint, and warm minimalism; or (2) high-end Japanese lifestyle magazine style with stark white background, burnt orange accent, charcoal gray, structured grids, and asymmetric edge-pressed imagery. Use when the user asks for PPT design, slide decks, presentation styling, ppt-master integration, or warm/sharp minimalist business, humanities, brand story, or lifestyle editorial decks. +--- + +# Japanese Style PPT + +Use this skill to design PPT decks with refined Japanese editorial restraint. It supports two house styles: + +- **Style 1: Washi Paper & Soft Glow** - washi paper texture, quiet geometry, soft glow, indigo emphasis, professional warmth. +- **Style 2: Japanese Lifestyle Editorial** - stark white background, bold elegant sans-serif headings, structured grids, burnt orange/charcoal accents, asymmetric edge-pressed imagery. + +## Core Workflow + +1. If the task uses `ppt-master`, follow the `ppt-master` pipeline first. Use this skill as the visual style layer for the Eight Confirmations, `design_spec.md`, `spec_lock.md`, SVG execution, and visual QA. +2. If the user asks for "second style", "Japanese lifestyle magazine", "burnt orange", "stark white", or "asymmetric edge-pressed imagery", read `references/japanese-lifestyle-editorial.md`. +3. Otherwise read `references/style-system.md` before choosing colors, typography, background treatment, and icon strategy. +4. Read `references/slide-patterns.md` before creating or rewriting slide layouts. +5. Read `references/ppt-master-integration.md` when producing `design_spec.md`, `spec_lock.md`, or SVG pages through `ppt-master`. +6. Read `references/qa-checklist.md` before final delivery or when reviewing a generated deck. + +## Non-Negotiable Style Rules + +- Use a soft off-white or pale washi paper background; avoid pure white and pure black. +- Use exactly one active accent color per deck. Default to indigo `#2C3E50`. +- Use the supplied palette only as muted supporting colors, not as a rainbow. +- Favor thin gray lines, asymmetry, and negative space over heavy cards. +- Prefer vector diagrams, quiet image crops, and tactile paper surfaces over glossy stock visuals. +- Avoid neon, glassmorphism, loud gradients, oversized icons, emoji, and generic SaaS blue-purple aesthetics. +- Keep slide density moderate. Let one idea breathe on each page unless the source truly requires a dense framework. +- Always use 16:9 unless the user explicitly requests another ratio. + +## Default Style Values + +- Background: `#F5F5F5` +- Active accent: `#2C3E50` +- Body text: `#333333` +- Secondary text: `#6B6B6B` +- Divider: `#D8D6D0` +- Palette reserves: `#B3AFCB`, `#8995B7`, `#777F6C`, `#AA6F5F`, `#D5D0DB` + +## Style 2 Quick Values + +- Background: `#FFFFFF` +- Burnt orange accent: `#CC5500` +- Body/title text: `#333333` +- Deep clay accent: `#71362B` +- Layout: structured grid, high negative space, asymmetric edge-pressed images +- Typography direction: bold but elegant sans-serif headings, sharp editorial details + +## Output Expectations + +For new decks: + +- Produce a clear content strategy first: audience, narrative arc, page count, slide outline. +- Use assertion-style slide titles for business decks. +- Use Japanese minimalist editorial composition: 60-75% quiet surface, 20-30% content, 5-10% accent. +- Include speaker notes when the workflow supports them. +- Run visual QA by exporting slides to images when possible. + +For redesigns: + +- Preserve the user's message and slide count unless asked to restructure. +- Replace generic cards with lines, open grids, framed callouts, or bento-like asymmetry. +- Harmonize all typography, spacing, and color usage to the selected Japanese style system. + +## Bundled Resources + +- `references/style-system.md`: palette, typography, texture, icon, and material rules. +- `references/japanese-lifestyle-editorial.md`: second style variant with stark white editorial magazine rules. +- `references/slide-patterns.md`: reusable PPT page structures in this style. +- `references/ppt-master-integration.md`: how to express this style inside `ppt-master` artifacts. +- `references/qa-checklist.md`: final review criteria. +- `assets/template.html`: optional HTML deck starter using this visual language. +- `assets/style2-template.html`: optional HTML starter for the Japanese Lifestyle Editorial variant. diff --git a/japanese-style-ppt-skill/agents/openai.yaml b/japanese-style-ppt-skill/agents/openai.yaml new file mode 100644 index 0000000..215cb35 --- /dev/null +++ b/japanese-style-ppt-skill/agents/openai.yaml @@ -0,0 +1,8 @@ +interface: + display_name: "Japanese Style PPT" + short_description: "Japanese editorial PPT styles" + brand_color: "#2C3E50" + default_prompt: "Use japanese-style-ppt-skill to create a Japanese editorial PPT deck." + +policy: + allow_implicit_invocation: true diff --git a/japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/01_cover.svg b/japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/01_cover.svg new file mode 100644 index 0000000..f27b24d --- /dev/null +++ b/japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/01_cover.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + ENGINEERING NOTE / MANAGED AGENTS + + + + + ScalingManagedAgentsDecoupling the brain from the hands + Harness assumptions go stale as models improve.The durable part is the interface: session,harness, and sandbox can evolve independently. + + + + 01 + Stable abstractions outlast implementation details. + Source: Anthropic Engineering, "Scaling Managed Agents" + + + + + JAPANESE LIFESTYLE EDITORIAL / 16:9 + 01 / 03 + + \ No newline at end of file diff --git a/japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/02_architecture_shift.svg b/japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/02_architecture_shift.svg new file mode 100644 index 0000000..58b88dc --- /dev/null +++ b/japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/02_architecture_shift.svg @@ -0,0 +1,115 @@ + + + + + ISSUE 02 / ARCHITECTURE SHIFT + + Decoupling turns fragile containersinto replaceable interfaces.The key move is a smaller contract between the brain, session, and hands. + + + + BEFORE + + Single container + Session, harness, and sandboxshare one environment. + + + + + + + + Session log + + + + + + + + + + + Harness loop + + + + + + + + + Sandbox and tools + + Failure mode: a stuck or dead containercan hide the root cause and lose state. + + + + + DECOUPLE + + + + AFTER + + + + + + + + + + + + + + Brain + harness loop + + + + + + + + + + + Session + append-only log + + + + + + + + + + + + Hands + sandbox + tools + + + + + + + + + + + + execute(name,input) -> string + wake(sessionId) + + + + + + Source: Anthropic Engineering, Scaling Managed Agents + 02 / 03 + + \ No newline at end of file diff --git a/japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/03_why_it_scales.svg b/japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/03_why_it_scales.svg new file mode 100644 index 0000000..85e63bc --- /dev/null +++ b/japanese-style-ppt-skill/assets/examples/japanese-lifestyle-editorial/03_why_it_scales.svg @@ -0,0 +1,68 @@ + + + + + + + + MANY BRAINS / MANY HANDS + + + + ISSUE 03 / SCALE LOGIC + + Stable interfaces create roomfor future harnesses. + + + TIME TO FIRST TOKEN + p50 + -60% + / p95 + -90%+ + Brains can start inference immediately and connect to hands only when needed. + + + + + + + + + + + + Security boundary + Credentials stay outside the sandbox where generated code runs. + + + + + + + + + Durable context + The session log lives outside Claude's context window and can be queried. + + + + + + 01 / SESSION + + Context becomes an external object:recoverable, sliceable, durable. + 02 / HANDS + + + + + + + Every hand is just a tool behindexecute(name,input) -> string. + + + + Source: Anthropic Engineering, Scaling Managed Agents + 03 / 03 + + \ No newline at end of file diff --git a/japanese-style-ppt-skill/assets/examples/washi-soft-glow/01_cover.svg b/japanese-style-ppt-skill/assets/examples/washi-soft-glow/01_cover.svg new file mode 100644 index 0000000..48e521c --- /dev/null +++ b/japanese-style-ppt-skill/assets/examples/washi-soft-glow/01_cover.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + ENGINEERING ESSAY / MANAGED AGENTS + + + + + ScalingManagedAgentsDecoupling the brain from the hands + Harness assumptions go stale as models improve.Managed Agents keeps the interface stablewhile implementations underneath can change. + + + + + + VIRTUALIZED COMPONENTS / SESSION / HARNESS / SANDBOX + + + + + Source: Anthropic Engineering + 01 / 03 + + \ No newline at end of file diff --git a/japanese-style-ppt-skill/assets/examples/washi-soft-glow/02_architecture_shift.svg b/japanese-style-ppt-skill/assets/examples/washi-soft-glow/02_architecture_shift.svg new file mode 100644 index 0000000..7e3d3a2 --- /dev/null +++ b/japanese-style-ppt-skill/assets/examples/washi-soft-glow/02_architecture_shift.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + 02 / ARCHITECTURE + + Separating session, harness, and sandboxmakes failure recoverable. + + + + + + COUPLED CONTAINER + DECOUPLED INTERFACES + + + + One environment + Session, harness, and sandboxshare fate. Debugging and recoverydepend on the same container. + state loss / stuck sessions / hidden root cause + + + + + + + + + + + + + + + Brain + harness + + + + + + + + + + Session + event log + + + + + + + + + + + Hands + sandbox + + + + + + + + + + + + + execute(name,input) -> string / wake(sessionId) + + + + + Source: Anthropic Engineering, Scaling Managed Agents + 02 / 03 + + \ No newline at end of file diff --git a/japanese-style-ppt-skill/assets/examples/washi-soft-glow/03_durable_scale.svg b/japanese-style-ppt-skill/assets/examples/washi-soft-glow/03_durable_scale.svg new file mode 100644 index 0000000..b403060 --- /dev/null +++ b/japanese-style-ppt-skill/assets/examples/washi-soft-glow/03_durable_scale.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + 03 / DURABLE SCALE + + + + + The interface is the product thatneeds to survive future models. + + + TIME TO FIRST TOKEN + p50 + -60% + p95 + -90%+ + Provision hands only when needed; let brains begin work immediately. + + + + + + + + + + + + Security boundary + Tokens stay outside the sandbox where generated code runs. + + + + + + + + + Durable context + Session logs live outside Claude's context window. + + + + + + + MANY BRAINS / MANY HANDS + + + + SESSION AS EXTERNAL CONTEXT OBJECT + + + A meta-harness is opinionated about interfaces, not implementations. + + + + + Source: Anthropic Engineering, Scaling Managed Agents + 03 / 03 + + \ No newline at end of file diff --git a/japanese-style-ppt-skill/assets/style2-template.html b/japanese-style-ppt-skill/assets/style2-template.html new file mode 100644 index 0000000..c6917a8 --- /dev/null +++ b/japanese-style-ppt-skill/assets/style2-template.html @@ -0,0 +1,163 @@ + + + + + + Japanese Lifestyle Editorial Deck + + + +
+
+
+
+
Japanese Lifestyle Editorial
+
+

Sharp white space. Burnt orange tension.

+

Use asymmetric edge-pressed imagery with a strict grid to balance liveliness and professional control.

+
+
Style 2 / 16:901 / 03
+
+
+
Structured grid
+

Editorial energy comes from alignment, not decoration.

+
+
01

White background

+
02

Burnt orange accent

+
03

Charcoal typography

+
04

Asymmetric image crop

+
+
Grid system02 / 03
+
+
+
+
+
Closing
+
+

活潑，但嚴謹。

+

用純白、焦橙和深炭灰建立專業平衡。

+
+
+
+
End03 / 03
+
+
+ + diff --git a/japanese-style-ppt-skill/assets/template.html b/japanese-style-ppt-skill/assets/template.html new file mode 100644 index 0000000..d15127f --- /dev/null +++ b/japanese-style-ppt-skill/assets/template.html @@ -0,0 +1,145 @@ + + + + + + Washi Paper & Soft Glow Deck + + + +
+
+
+
+
Washi Paper & Soft Glow
+

Title with quiet editorial warmth

+

Use a soft paper surface, thin indigo geometry, and generous negative space.

+
+
Professional minimalist deck01 / 03
+
+
+
Pattern / Asymmetric thesis
+
+
+

One focused idea per slide.

+

Let the layout breathe before adding extra containers. Use rules and spacing as structure.

+
+
+

Diagram, quote, image crop, or evidence frame.

+
+
+
Washi system02 / 03
+
+
+
Closing / Reflection
+

Professional does not have to feel cold.

+

Use restraint, texture, and a single accent to create warmth without losing clarity.

+
End03 / 03
+
+
+ + diff --git a/japanese-style-ppt-skill/references/japanese-lifestyle-editorial.md b/japanese-style-ppt-skill/references/japanese-lifestyle-editorial.md new file mode 100644 index 0000000..0af880a --- /dev/null +++ b/japanese-style-ppt-skill/references/japanese-lifestyle-editorial.md @@ -0,0 +1,127 @@ +# Style 2: Japanese Lifestyle Editorial + +Use this variant when the user asks for the second style, a Japanese lifestyle magazine mood, stark white editorial design, burnt orange accents, or asymmetric edge-pressed imagery. + +## Design Intent + +Create a high-end editorial PPT style inspired by Japanese lifestyle magazines: crisp, trend-setting, professional, spacious, and sharp. It should feel more energetic and graphic than the Washi Soft Glow style, but still disciplined and sophisticated. + +## Canvas + +- Aspect ratio: 16:9. +- `ppt-master` canvas: `0 0 1280 720`. +- Preserve generous safe margins, but allow images to press against one or two canvas edges for intentional tension. + +## Palette + +| Role | HEX | Usage | +| --- | --- | --- | +| Stark white | `#FFFFFF` | Primary background | +| Burnt orange | `#CC5500` | Main accent, section markers, active rule, callout number | +| Charcoal gray | `#333333` | Main text and headings | +| Deep clay | `#71362B` | Secondary accent, image captions, grounded warmth | +| Cool divider | `#D9D9D6` | Hairlines and grid rules | +| Soft gray field | `#F4F2EF` | Optional background panel | + +Rules: + +- Keep the deck mostly white and charcoal. +- Use burnt orange as the active accent; use deep clay only as a secondary editorial note. +- Do not combine with indigo from Style 1 unless the user explicitly asks for a hybrid. +- Avoid pastel moodiness; this style is sharper and more magazine-like. + +## Typography + +PPT-safe default: + +- Title: `Arial, Microsoft YaHei, sans-serif` +- Body: `Microsoft YaHei, PingFang SC, Arial, sans-serif` +- Label/code: `Consolas, Courier New, monospace` + +Direction: + +- Headings should be bold, elegant, and sans-serif. +- Use strong scale contrast, not decorative fonts. +- Prefer left-aligned headings. +- Use small uppercase monospace labels for section systems. +- Avoid serif title styling unless the user requests a more literary magazine tone. + +Suggested sizes for 16:9: + +- Cover title: 58-78 px. +- Page title: 34-44 px. +- Subtitle: 22-26 px. +- Body: 18-21 px. +- Caption/metadata: 11-14 px. + +## Layout Principles + +- Use structured grid composition: 12-column logic, clear baselines, precise alignments. +- Use abundant negative space. +- Use one assertive visual move per slide. +- Prefer sharp rectangular image crops and edge-pressed compositions. +- Avoid centered generic title slides. +- Avoid equal three-card rows unless the source requires direct comparison. + +## Asymmetric Edge-Pressed Imagery + +This is the signature layout move. + +Use when a slide has a product, place, person, evidence image, or brand story moment. + +Patterns: + +- Image presses to the right edge, text occupies left 35-45%. +- Image presses to top and right edges, caption locks to lower left. +- Tall image strip crops off the canvas edge, with burnt orange rule crossing into whitespace. +- Two image fragments offset vertically, one bleeding off the bottom edge. + +Rules: + +- Image crop must be intentional; do not accidentally cut off important subjects. +- Text must never overlap busy image areas without a solid white or translucent white field. +- Keep one clean caption line in deep clay or charcoal. +- Use burnt orange as a small anchor, not a border around every image. + +## Geometry and Details + +Use: + +- Thin charcoal or gray grid lines. +- Burnt orange section ticks. +- Small page labels such as `ISSUE 02 / FRAMEWORK`. +- Sharp framed callouts. +- Large whitespace fields. + +Avoid: + +- Paper texture as the primary surface. +- Soft glow as a recurring motif. +- Rounded blobs or decorative organic shapes. +- Heavy drop shadows. +- Lifestyle clutter that makes slides feel like posters instead of PPT. + +## Icon Strategy + +Icons should be rare. + +- Prefer `tabler-outline` for `ppt-master`. +- Use icons only for navigation markers or small concept labels. +- Color icons charcoal or burnt orange. + +## Best Fit + +Use for: + +- Brand story +- Lifestyle business proposal +- Product narrative +- Trend report +- Human-centered strategy +- Creative but professional pitch + +Avoid for: + +- Highly technical dense engineering briefings where diagrams need maximum clarity +- Government/formal compliance decks +- Academic thesis decks diff --git a/japanese-style-ppt-skill/references/ppt-master-integration.md b/japanese-style-ppt-skill/references/ppt-master-integration.md new file mode 100644 index 0000000..57bd3e5 --- /dev/null +++ b/japanese-style-ppt-skill/references/ppt-master-integration.md @@ -0,0 +1,153 @@ +# ppt-master Integration + +Use this reference when applying either Japanese editorial style inside `ppt-master`. + +## Eight Confirmations Defaults + +1. Canvas format: `PPT 16:9`, `0 0 1280 720`. +2. Page count: choose fewer pages than a dense consulting deck; protect negative space. +3. Target audience: define whether the deck is executive, brand, humanities, internal sharing, or proposal. +4. Style objective: usually `General Consulting` for business clarity, or `General Versatile` for brand story. +5. Color scheme: choose either Style 1 (paper + charcoal + indigo) or Style 2 (white + charcoal + burnt orange). +6. Icon usage: built-in `tabler-outline`, minimal inventory. +7. Typography: Style 1 uses editorial serif title; Style 2 uses bold elegant sans-serif headings. +8. Image usage: prefer existing images or vector diagrams; avoid AI imagery unless the user asks for atmospheric background assets. + +## design_spec.md Language + +Use the standard `ppt-master` design spec structure. In section III, describe: + +- "Japanese minimalist washi paper texture" +- "soft off-white tactile background" +- "thin gray architectural rules" +- "single indigo accent" +- "professional editorial warmth" + +For Style 2, describe: + +- "High-end Japanese lifestyle magazine editorial" +- "Stark white background" +- "Bold but elegant sans-serif headings" +- "Structured grid layout with generous negative space" +- "Burnt orange and charcoal gray accents" +- "Asymmetric edge-pressed image composition" + +## Style 1 spec_lock.md Defaults + +Use this as a starting point and adjust only when needed: + +```markdown +## canvas +- viewBox: 0 0 1280 720 +- format: PPT 16:9 + +## colors +- bg: #F5F5F5 +- bg_secondary: #EFEDEA +- primary: #2C3E50 +- accent: #2C3E50 +- text: #333333 +- text_secondary: #6B6B6B +- text_tertiary: #9A9690 +- border: #D8D6D0 +- soft_lavender: #D5D0DB +- wisteria: #B3AFCB +- blue_gray: #8995B7 +- moss_gray: #777F6C +- clay_rose: #AA6F5F + +## typography +- font_family: Microsoft YaHei, PingFang SC, Arial, sans-serif +- title_family: Georgia, Microsoft YaHei, serif +- emphasis_family: Georgia, Microsoft YaHei, serif +- code_family: Consolas, Courier New, monospace +- body: 20 +- title: 34 +- subtitle: 24 +- annotation: 15 +- cover_title: 64 +- chapter: 44 +- hero_number: 38 +- footnote: 11 + +## icons +- library: tabler-outline +- inventory: target, circle-check, chart-bar, notes, feather, leaf, sparkle, route, template, users +``` + +Before finalizing the icon inventory, verify icon filenames exist in `skills/ppt-master/templates/icons/tabler-outline`. + +## SVG Execution Rules + +- Re-read `spec_lock.md` before every page. +- Build paper texture with SVG circles/lines or low-opacity paths; do not use filters that may export poorly. +- Use `fill-opacity` / `opacity` attributes, not `rgba()`. +- Use thin rules and open frames instead of many filled cards. +- Keep titles assertion-like and concise. +- Include source footers in a quiet monospace style. + +## Suggested Page Rhythm + +```markdown +## page_rhythm +- P01: anchor +- P02: breathing +- P03: dense +- P04: dense +- P05: breathing +- P06: dense +- P07: dense +- P08: breathing +- P09: dense +- P10: anchor +``` + +Adjust rhythm based on source content. Do not add breathing pages as filler. + +## Style 2 spec_lock.md Defaults + +Use this when the user asks for the second style: + +```markdown +## canvas +- viewBox: 0 0 1280 720 +- format: PPT 16:9 + +## colors +- bg: #FFFFFF +- bg_secondary: #F4F2EF +- primary: #CC5500 +- accent: #CC5500 +- text: #333333 +- text_secondary: #6B6B6B +- text_tertiary: #8A8580 +- border: #D9D9D6 +- deep_clay: #71362B +- white: #FFFFFF + +## typography +- font_family: Microsoft YaHei, PingFang SC, Arial, sans-serif +- title_family: Arial, Microsoft YaHei, sans-serif +- emphasis_family: Arial, Microsoft YaHei, sans-serif +- code_family: Consolas, Courier New, monospace +- body: 20 +- title: 38 +- subtitle: 24 +- annotation: 14 +- cover_title: 68 +- chapter: 46 +- hero_number: 42 +- footnote: 11 + +## icons +- library: tabler-outline +- inventory: arrow-right, circle-check, chart-bar, layout-grid, photo, route, template, users +``` + +For Style 2 SVG execution: + +- Use `#FFFFFF` as the dominant background. +- Use burnt orange only for small active accents, not broad fills. +- Use asymmetric edge-pressed images when images exist. +- If no images exist, simulate magazine energy through cropped geometric blocks, vertical type labels, and precise grid rules. +- Keep 16:9 throughout. diff --git a/japanese-style-ppt-skill/references/qa-checklist.md b/japanese-style-ppt-skill/references/qa-checklist.md new file mode 100644 index 0000000..6868366 --- /dev/null +++ b/japanese-style-ppt-skill/references/qa-checklist.md @@ -0,0 +1,46 @@ +# Washi Soft Glow QA Checklist + +Use this before final delivery. + +## Visual Fit + +- Style 1 background reads as soft paper, not blank white. +- Style 2 background is intentionally stark white, not off-white paper. +- Accent color is indigo for Style 1 or burnt orange for Style 2. +- Palette does not feel like rainbow pastel. +- Geometry is precise, thin, and quiet. +- Deck feels professional with warmth, not craft-themed. +- Style 2 feels sharp and magazine-like, not soft or nostalgic. + +## Layout + +- Each slide has a clear focal point. +- There is enough negative space. +- Cards are used sparingly. +- Style 2 uses structured grids and edge-pressed images where appropriate. +- No repeated generic centered title + bullet layout. +- Diagrams align to a consistent grid. +- Footers and page numbers are unobtrusive. + +## Text + +- Titles are concise and editorial. +- Body text is readable at presentation distance. +- Text does not touch borders, rules, or icons. +- English terms are preserved when they are domain terms. +- No emoji. + +## PPT / SVG + +- Run `svg_quality_checker.py` when using `ppt-master`. +- Fix all errors before export. +- Prefer zero warnings; document any warnings that remain. +- Export PPT to PNG previews and inspect visually. +- Check cover, densest slide, and conclusion manually. + +## Common Fixes + +- If a slide feels too empty: add a thin rule, metadata label, or one structured diagram; do not add random decoration. +- If a slide feels too busy: remove containers before shrinking text. +- If warmth is missing: use paper texture, serif title, or a muted clay/lavender wash on one page. +- If professionalism is missing: reduce color variety and remove decorative marks. diff --git a/japanese-style-ppt-skill/references/slide-patterns.md b/japanese-style-ppt-skill/references/slide-patterns.md new file mode 100644 index 0000000..d941b2b --- /dev/null +++ b/japanese-style-ppt-skill/references/slide-patterns.md @@ -0,0 +1,106 @@ +# Washi Soft Glow Slide Patterns + +Use these patterns as a design vocabulary. Do not repeat the same layout for every slide. For the second style, prefer sharper grid rhythm, stark white space, burnt orange ticks, and asymmetric edge-pressed images. + +## 1. Quiet Editorial Cover + +Use for title, section opener, or conclusion. + +- Large left-aligned serif title. +- One thin vertical indigo rule. +- Small monospace metadata. +- Wide empty field on the right with a faint geometric mark. +- Optional paper grain across the whole page. + +## 2. Asymmetric Thesis + +Use when introducing the main argument. + +- Left: 2-4 line thesis in large body text. +- Right: minimal equation, diagram, or framed concept. +- One thin divider between zones. +- No card stack. + +## 3. Thin-Line Matrix + +Use for 2x2 logic, comparison, decision model. + +- Hairline grid in divider gray. +- Column/row labels in indigo. +- Cells use text only, with one icon if needed. +- Add one conclusion line below the matrix. + +## 4. Paper Bento + +Use for 4-6 related concepts when a card layout is unavoidable. + +- Use uneven card sizes or offset rows. +- Cards should have thin borders, no heavy shadow. +- One indigo edge line is enough for emphasis. +- Avoid equal three-column feature rows unless the content demands it. + +## 5. Process Thread + +Use for workflows and timelines. + +- One horizontal or vertical thread line. +- Small numbered nodes. +- Each step gets a short title and one-line explanation. +- Leave large top/bottom whitespace. + +## 6. Framed Evidence + +Use when showing a screenshot, quote, table, or source excerpt. + +- Place evidence in a quiet frame. +- Put interpretation beside it, not underneath as a generic caption. +- Use one thin callout line to connect evidence and takeaway. + +## 7. Reflective Quote + +Use for emotional, brand, humanities, or executive reflection moments. + +- One sentence in large serif type. +- Soft paper field or pale lavender wash. +- Small source note. +- No decorative quotation marks unless extremely subtle. + +## 8. Closing Questions + +Use at the end. + +- Large two-line conclusion. +- Three quiet open questions or next actions. +- Thin top rule and restrained page footer. + +## 9. Lifestyle Magazine Edge Press + +Use for Style 2 with photos or strong visual evidence. + +- Image bleeds to the right, top, or bottom canvas edge. +- Text block sits on the opposite side with strict grid alignment. +- Burnt orange tick or rule connects the text to the image. +- Caption is small, sharp, and charcoal/deep clay. + +## 10. Stark Grid Feature + +Use for Style 2 structured professional pages. + +- White background. +- 2-4 grid zones with hairline dividers. +- One large sans-serif assertion heading. +- One burnt orange numeric marker or section tab. +- No soft paper texture; detail comes from alignment and contrast. + +## Layout Rhythm + +For a 10-page deck: + +- Page 1: anchor cover +- Pages 2-3: framing +- Pages 4-6: structured model or evidence +- Page 7: breathing reflection +- Pages 8-9: application / implications +- Page 10: closing + +Use `breathing` pages where the audience needs to absorb an idea. diff --git a/japanese-style-ppt-skill/references/style-system.md b/japanese-style-ppt-skill/references/style-system.md new file mode 100644 index 0000000..85070c6 --- /dev/null +++ b/japanese-style-ppt-skill/references/style-system.md @@ -0,0 +1,102 @@ +# Washi Paper & Soft Glow Style System + +## Design Intent + +Create a calm, tactile, high-end PPT style that blends Japanese washi paper, Muji-like restraint, and modern editorial precision. The deck should feel professional, reflective, and warm, not decorative or sentimental. + +## Palette + +Use these colors with low saturation and generous whitespace. + +| Role | HEX | Usage | +| --- | --- | --- | +| Paper base | `#F5F5F5` | Primary background | +| Indigo accent | `#2C3E50` | Main accent, rules, emphasis, diagram nodes | +| Charcoal text | `#333333` | Body and title text | +| Secondary text | `#6B6B6B` | Captions and support copy | +| Divider gray | `#D8D6D0` | Thin rules and quiet borders | +| Mist lavender | `#D5D0DB` | Soft background field, rare | +| Wisteria gray | `#B3AFCB` | Gentle secondary wash, rare | +| Blue gray | `#8995B7` | Alternative cool accent, not with indigo unless muted | +| Moss gray | `#777F6C` | Organic supporting tone, rare | +| Clay rose | `#AA6F5F` | Human warmth marker, rare | + +Rules: + +- Use `#2C3E50` as the only active accent unless the user explicitly selects walnut/clay. +- Do not use all five palette colors equally. +- Keep most pages to paper + charcoal + gray + indigo. +- Use palette reserves as translucent fields or single-page mood accents only. + +## Background and Material + +Use paper texture, not glossy gradients. + +- PPT/SVG: simulate washi through tiny low-opacity dots, fine fibers, or subtle irregular line texture. +- HTML: use radial noise, pseudo-element grain, or a soft paper overlay. +- Keep texture subtle enough that body text remains readable. +- Avoid bokeh, orbs, neon glow, glass panels, or strong drop shadows. + +Soft glow is allowed only as a restrained local wash: + +- Use pale indigo/lavender at very low opacity. +- Apply behind a hero word, diagram node, or section transition. +- Never use glowing buttons or outer neon shadows. + +## Typography + +Preferred PPT-safe direction: + +- Title: `Georgia, "Microsoft YaHei", serif` +- Body: `"Microsoft YaHei", "PingFang SC", Arial, sans-serif` +- Code/labels: `Consolas, "Courier New", monospace` + +Usage: + +- Use title serif for editorial warmth and hierarchy. +- Use sans body for clarity. +- Use monospace sparingly for section labels, page numbers, technical terms, and source notes. +- Avoid negative letter spacing in PPT. +- Keep body text around 18-22 px for dense content and 22-26 px for reflective decks. + +## Geometry + +Use precise, light geometry: + +- Thin horizontal and vertical rules. +- Open rectangular frames. +- Small indigo dots or line endpoints. +- Asymmetric columns. +- Spacious grids. +- Low-radius rectangles only when a container is needed. + +Avoid: + +- Heavy card grids. +- Thick borders. +- Filled icon badges. +- Decorative blobs. +- Repeated centered title + bullets. + +## Icons + +For `ppt-master`, prefer `tabler-outline`. + +- Use icons as quiet line markers, not visual decoration. +- Use at most 1-3 icons per page. +- Keep stroke/icons indigo or charcoal. +- Do not use emoji. + +## Imagery + +Best image types: + +- Cropped product/process photos with lots of negative space. +- Paper, craft, architecture, landscape, studio details. +- Softly framed diagrams and scanned document fragments. + +Treatment: + +- Use image crops in geometric frames. +- Add thin caption rules. +- Avoid dark stock photos, busy office scenes, and generic AI illustrations. diff --git a/soft-3d-clay-ppt-skill/SKILL.md b/soft-3d-clay-ppt-skill/SKILL.md new file mode 100644 index 0000000..61cc59b --- /dev/null +++ b/soft-3d-clay-ppt-skill/SKILL.md @@ -0,0 +1,61 @@ +--- +name: soft-3d-clay-ppt-skill +description: Create or redesign PowerPoint/PPTX decks in a "Soft 3D / Claymorphism" style: minimalist professional presentation design with soft matte 3D geometric shapes, pastel beige/sage/warm-pink palette, airy clean layouts, soft shadows, high-end illustration feel, and sophisticated UI design. Use when the user asks for PPT design, slide decks, presentation styling, ppt-master integration, claymorphism, soft 3D, pastel professional decks, or modern airy business presentations. +--- + +# Soft 3D / Claymorphism PPT + +Use this skill to design professional PPT decks with a lightweight 3D claymorphism aesthetic: soft matte geometric shapes, airy whitespace, pastel warmth, and polished UI-like layout discipline. The style should feel modern, high-end, and calm, not childish or toy-like. + +## Core Workflow + +1. If the task uses `ppt-master`, follow the `ppt-master` pipeline first. Use this skill as the visual style layer for the Eight Confirmations, `design_spec.md`, `spec_lock.md`, SVG execution, and visual QA. +2. Read `references/style-system.md` before choosing colors, typography, background treatment, icon strategy, and 3D shape usage. +3. Read `references/slide-patterns.md` before creating or rewriting slide layouts. +4. Read `references/ppt-master-integration.md` when producing `design_spec.md`, `spec_lock.md`, or SVG pages through `ppt-master`. +5. Read `references/qa-checklist.md` before final delivery or when reviewing a generated deck. + +## Non-Negotiable Style Rules + +- Keep the layout extremely clean and professional. +- Use soft 3D geometry as corner accents or concept anchors, not as clutter. +- Use the pastel palette with restraint: warm beige base, sage green and warm pink accents. +- Use soft shadows and matte surfaces; avoid glossy plastic, neon, glassmorphism, or hard metallic 3D. +- Keep most information in flat, readable typography and simple grids. +- Avoid emoji, cartoon mascots, busy backgrounds, and saturated candy colors. +- Prefer 16:9 unless the user explicitly requests another aspect ratio. + +## Default Style Values + +- Background: `#FDF5E6` +- Sage green: `#B2AC88` +- Warm pink: `#DBADAD` +- Charcoal text: `#333333` +- Secondary text: `#6B6B6B` +- Soft divider: `#E7DAC8` +- Highlight surface: `#FFF9EF` + +## Output Expectations + +For new decks: + +- Start with a clear content strategy: audience, narrative arc, page count, slide outline. +- Use calm assertion headlines and short body copy. +- Place 3D shapes in corners, side gutters, or hero zones; do not let them compete with the message. +- Use spacious UI-like composition: clear columns, soft panels, and consistent spacing. +- Include speaker notes when the workflow supports them. +- Export slide previews for visual QA when possible. + +For redesigns: + +- Preserve the user's content unless asked to restructure. +- Replace heavy charts/cards with softer panels, floating callouts, and simple diagrams. +- Add soft 3D accents only where they clarify hierarchy or mood. + +## Bundled Resources + +- `references/style-system.md`: color, typography, 3D shape, material, and icon rules. +- `references/slide-patterns.md`: reusable PPT page structures for this style. +- `references/ppt-master-integration.md`: how to express the style inside `ppt-master`. +- `references/qa-checklist.md`: final review criteria. +- `assets/template.html`: optional HTML deck starter using this visual language. diff --git a/soft-3d-clay-ppt-skill/agents/openai.yaml b/soft-3d-clay-ppt-skill/agents/openai.yaml new file mode 100644 index 0000000..1767515 --- /dev/null +++ b/soft-3d-clay-ppt-skill/agents/openai.yaml @@ -0,0 +1,5 @@ +interface: + display_name: "Soft 3D Clay PPT" + short_description: "Soft claymorphism PPT styling" + default_prompt: "Use soft-3d-clay-ppt-skill to create a soft 3D claymorphism PPT deck." + brand_color: "#B2AC88" diff --git a/soft-3d-clay-ppt-skill/assets/examples/01_cover.svg b/soft-3d-clay-ppt-skill/assets/examples/01_cover.svg new file mode 100644 index 0000000..639d300 --- /dev/null +++ b/soft-3d-clay-ppt-skill/assets/examples/01_cover.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + SOFT 3D / MANAGED AGENTS + + + + + ScalingManagedAgentsDecoupling the brain from the hands + A softer interface story for long-horizon agents:stable contracts, replaceable hands, durable sessions. + + + + + + + + + + + + Source: Anthropic Engineering + 01 / 03 + + \ No newline at end of file diff --git a/soft-3d-clay-ppt-skill/assets/examples/02_interface_system.svg b/soft-3d-clay-ppt-skill/assets/examples/02_interface_system.svg new file mode 100644 index 0000000..88f6657 --- /dev/null +++ b/soft-3d-clay-ppt-skill/assets/examples/02_interface_system.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + 02 / INTERFACE SYSTEM + Decoupling turns a fragile containerinto a friendly interface system. + + + + + BEFORE + One container does everything + Session, harness, and sandboxshare state and failure modes. + + session + harness + sandbox + + hard to debug / hard to recover + + + + + + + + + + + + + + AFTER + + + + + + + + + + + + + + + Brain + harness + + + + + + + + + + + + + Session + event log + + + + + + + + + + + + + + Hands + tools + + + + + + + + + execute(name,input) -> string + + + + + Source: Anthropic Engineering, Scaling Managed Agents + 02 / 03 + + \ No newline at end of file diff --git a/soft-3d-clay-ppt-skill/assets/examples/03_why_it_scales.svg b/soft-3d-clay-ppt-skill/assets/examples/03_why_it_scales.svg new file mode 100644 index 0000000..7fee490 --- /dev/null +++ b/soft-3d-clay-ppt-skill/assets/examples/03_why_it_scales.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + 03 / SCALE WITHOUT STIFFNESS + Stable interfaces make agentsfaster, safer, and easier to evolve. + + + + + TIME TO FIRST TOKEN + p50 + -60% + p95 + -90%+ + Start brains now; provision hands only when the task asks for them. + + + + + + + MANY BRAINS / MANY HANDS + + + + + + + + + + + + Safer sandbox + Credentials stay outside generated code. + + + + + + + + + + Durable context + Session logs live outside the context window. + + + + + + + + + + Future-ready + Harnesses can change as models improve. + + + + + + + session as external, recoverable context object + + + + + Source: Anthropic Engineering, Scaling Managed Agents + 03 / 03 + + \ No newline at end of file diff --git a/soft-3d-clay-ppt-skill/assets/template.html b/soft-3d-clay-ppt-skill/assets/template.html new file mode 100644 index 0000000..6a56618 --- /dev/null +++ b/soft-3d-clay-ppt-skill/assets/template.html @@ -0,0 +1,156 @@ + + + + + + Soft 3D Clay PPT + + + +
+
+
+
+
+
Soft 3D / Claymorphism
+

Airy slides with soft matte depth.

+

Use lightweight 3D geometry as a professional accent, not decoration for its own sake.

+
+
Minimal professional deck01 / 03
+
+
+
Soft UI Panels
+

Keep the information flat. Let depth frame the mood.

+
+

Warm beige base

+

Sage green accent

+

Morandi pink warmth

+
+
Style system02 / 03
+
+
+
+
+
Closing
+

Modern, soft, and still serious.

+

Use whitespace, charcoal typography, and restrained 3D accents to keep the deck sophisticated.

+
+
End03 / 03
+
+
+ + diff --git a/soft-3d-clay-ppt-skill/references/ppt-master-integration.md b/soft-3d-clay-ppt-skill/references/ppt-master-integration.md new file mode 100644 index 0000000..5589e96 --- /dev/null +++ b/soft-3d-clay-ppt-skill/references/ppt-master-integration.md @@ -0,0 +1,92 @@ +# ppt-master Integration + +Use this reference when applying Soft 3D / Claymorphism inside `ppt-master`. + +## Eight Confirmations Defaults + +1. Canvas format: `PPT 16:9`, `0 0 1280 720`. +2. Page count: protect whitespace; avoid too many dense pages. +3. Target audience: define whether the deck is business, product, brand, or internal training. +4. Style objective: usually `General Versatile` for visual warmth or `General Consulting` for business clarity. +5. Color scheme: warm beige + sage + warm pink + charcoal. +6. Icon usage: built-in `tabler-outline`, minimal inventory. +7. Typography: clean sans-serif title and body, monospace labels. +8. Image usage: use existing screenshots/photos when useful; otherwise use vector soft 3D geometry. + +## design_spec.md Language + +Use the standard `ppt-master` design spec structure. In section III, describe: + +- "Minimalist professional presentation" +- "Soft 3D / Claymorphism aesthetic" +- "Soft matte geometric shapes floating in corners" +- "Pastel beige, sage green, and Morandi warm pink palette" +- "Airy modern UI-like layout" +- "Sophisticated soft shadows and high-end illustration feel" + +## spec_lock.md Defaults + +```markdown +## canvas +- viewBox: 0 0 1280 720 +- format: PPT 16:9 + +## colors +- bg: #FDF5E6 +- bg_secondary: #FFF9EF +- primary: #B2AC88 +- accent: #DBADAD +- text: #333333 +- text_secondary: #6B6B6B +- text_tertiary: #9A9288 +- border: #E7DAC8 +- sage: #B2AC88 +- warm_pink: #DBADAD +- shadow: #C8BBA8 +- white: #FFFFFF + +## typography +- font_family: Microsoft YaHei, PingFang SC, Arial, sans-serif +- title_family: Arial, Microsoft YaHei, sans-serif +- emphasis_family: Arial, Microsoft YaHei, sans-serif +- code_family: Consolas, Courier New, monospace +- body: 20 +- title: 38 +- subtitle: 24 +- annotation: 14 +- cover_title: 68 +- chapter: 44 +- hero_number: 42 +- footnote: 11 + +## icons +- library: tabler-outline +- inventory: circle-check, chart-bar, cube, sphere, layout-grid, route, sparkles, template, users +``` + +Before finalizing icon inventory, verify icon filenames exist in `skills/ppt-master/templates/icons/tabler-outline`. + +## SVG Execution Rules + +- Re-read `spec_lock.md` before every page. +- Build soft 3D shapes with layered SVG geometry, not external images unless requested. +- Do not use `rgba()`. +- Avoid filters if they create export problems; approximate soft shadows with low-opacity offset shapes. +- Keep 3D accents out of text-heavy zones. +- Use 16:9 throughout unless the user explicitly overrides. + +## Suggested Page Rhythm + +```markdown +## page_rhythm +- P01: anchor +- P02: breathing +- P03: dense +- P04: dense +- P05: breathing +- P06: dense +- P07: dense +- P08: breathing +- P09: dense +- P10: anchor +``` diff --git a/soft-3d-clay-ppt-skill/references/qa-checklist.md b/soft-3d-clay-ppt-skill/references/qa-checklist.md new file mode 100644 index 0000000..ec7a2db --- /dev/null +++ b/soft-3d-clay-ppt-skill/references/qa-checklist.md @@ -0,0 +1,38 @@ +# Soft 3D / Claymorphism QA Checklist + +## Visual Fit + +- The deck feels professional, airy, and modern. +- 3D shapes are soft matte accents, not toy-like decorations. +- Palette is beige/sage/warm-pink with charcoal text. +- No neon, glossy plastic, glassmorphism, or saturated candy colors. +- Slides retain enough whitespace. + +## Layout + +- Each slide has one focal point. +- 3D accents do not overlap or reduce text readability. +- Panels align to a consistent grid. +- Card usage is purposeful and not repetitive. +- Dense slides still feel calm and structured. + +## Text + +- Titles are concise and left aligned unless there is a strong reason otherwise. +- Body text is readable at presentation distance. +- Text does not touch panel edges or decorative objects. +- No emoji. + +## PPT / SVG + +- Run `svg_quality_checker.py` when using `ppt-master`. +- Fix all errors before export. +- Prefer zero warnings. +- Export PPT to PNG previews and inspect cover, densest slide, and conclusion. + +## Common Fixes + +- If the deck feels childish: reduce 3D shapes, desaturate accents, increase whitespace, and use more charcoal typography. +- If the deck feels flat: add one soft corner object or subtle offset shadow. +- If the deck feels cluttered: remove decorative shapes before shrinking text. +- If contrast is weak: darken text to `#333333` and reduce pastel text usage. diff --git a/soft-3d-clay-ppt-skill/references/slide-patterns.md b/soft-3d-clay-ppt-skill/references/slide-patterns.md new file mode 100644 index 0000000..60e11a9 --- /dev/null +++ b/soft-3d-clay-ppt-skill/references/slide-patterns.md @@ -0,0 +1,80 @@ +# Soft 3D / Claymorphism Slide Patterns + +Use these patterns as a layout vocabulary. Do not turn every slide into a decorative 3D poster. + +## 1. Airy Clay Cover + +- Warm beige background. +- Large clean sans-serif title on the left. +- Soft 3D cluster in one corner. +- Small metadata label and a quiet footer. + +## 2. Floating Concept Object + +Use for one central idea. + +- Text column occupies 45-55%. +- One matte 3D object or abstract shape cluster supports the concept. +- Add one short takeaway line. + +## 3. Soft UI Panels + +Use for 3-5 related points. + +- Panels use highlight surface `#FFF9EF`. +- Rounded corners, subtle border, soft offset shadow. +- One small 3D accent can sit outside the panel group. +- Avoid heavy card grids with equal visual weight. + +## 4. Clay Process Thread + +Use for workflows. + +- Use a simple line/thread with rounded nodes. +- Nodes may be sage/pink clay-like dots. +- Keep each step short. +- Add one quiet conclusion below. + +## 5. Pastel Matrix + +Use for classification or comparison. + +- Hairline grid in soft divider. +- One axis may use sage, the other warm pink. +- Text remains charcoal. +- Use depth only in axis markers, not every cell. + +## 6. Evidence + Soft Object + +Use for screenshots, charts, or quotes. + +- Evidence frame uses a soft rounded rectangle. +- 3D shape sits near the frame corner, partially outside the content grid. +- Interpretation sits beside or below with clear hierarchy. + +## 7. Breathing Quote + +Use for emotional or strategic pause. + +- One large sentence, left aligned. +- Small 3D shape in far corner. +- Huge negative space. + +## 8. Closing + +- Large concise statement. +- Three next steps or open questions in soft panels. +- One small 3D cluster as a signature. + +## Suggested 10-Page Rhythm + +- P01: anchor cover +- P02: breathing thesis +- P03: dense framework +- P04: dense comparison +- P05: breathing insight +- P06: dense process +- P07: dense evidence +- P08: breathing quote +- P09: dense implications +- P10: anchor close diff --git a/soft-3d-clay-ppt-skill/references/style-system.md b/soft-3d-clay-ppt-skill/references/style-system.md new file mode 100644 index 0000000..228e206 --- /dev/null +++ b/soft-3d-clay-ppt-skill/references/style-system.md @@ -0,0 +1,104 @@ +# Soft 3D / Claymorphism Style System + +## Design Intent + +Create a minimalist professional presentation style with soft matte 3D geometric shapes floating in corners. The deck should feel airy, modern, sophisticated, and UI-polished. It should not feel like a children's clay illustration or a generic pastel template. + +## Palette + +| Role | HEX | Usage | +| --- | --- | --- | +| Warm beige | `#FDF5E6` | Main background | +| Sage green | `#B2AC88` | Primary accent, 3D shape base, section markers | +| Morandi warm pink | `#DBADAD` | Secondary accent, soft 3D shape, warm emphasis | +| Charcoal | `#333333` | Main text | +| Secondary text | `#6B6B6B` | Body support, captions | +| Soft divider | `#E7DAC8` | Hairlines, panel borders | +| Highlight surface | `#FFF9EF` | Soft cards/panels | +| Shadow tone | `#C8BBA8` | Shadow approximation in SVG/PPT | + +Rules: + +- Use beige as the dominant surface. +- Use sage and warm pink as accents, not equal full-page backgrounds. +- Do not introduce saturated purple, blue, neon green, or strong gradients. +- Keep text charcoal; avoid pure black. + +## 3D Material Rules + +Claymorphism here means soft matte depth, not realistic 3D rendering. + +Use: + +- Rounded spheres, pills, capsules, soft cubes, rings, torus-like arcs, and abstract blobs. +- Pastel fills with subtle highlight and shadow. +- Corner placement: top-right, bottom-left, or side gutters. +- Low-contrast depth to frame content. + +Avoid: + +- Large central 3D objects on every page. +- Plastic shine, metallic reflections, or harsh perspective. +- Dense stacks of shapes. +- Shapes behind small text. + +SVG/PPT approximation: + +- Use circles, ellipses, rounded rectangles, and paths. +- Create depth with 2-3 layered shapes: base fill, low-opacity highlight, soft offset shadow. +- Use opacity attributes rather than `rgba()`. +- If using `ppt-master`, avoid filters unless confirmed safe; use simple layered geometry instead. + +## Typography + +PPT-safe default: + +- Title: `Arial, Microsoft YaHei, sans-serif` +- Body: `Microsoft YaHei, PingFang SC, Arial, sans-serif` +- Label/code: `Consolas, Courier New, monospace` + +Direction: + +- Use clean, rounded-feeling sans typography. +- Titles should be confident but not oversized. +- Body copy should be quiet and readable. +- Use monospace only for labels, page numbers, and small technical tags. + +Suggested sizes for 16:9: + +- Cover title: 56-76 px. +- Page title: 34-42 px. +- Subtitle: 22-26 px. +- Body: 18-21 px. +- Caption/metadata: 11-14 px. + +## Layout and Spacing + +- Use generous whitespace and stable grid alignment. +- Prefer two-column layouts, hero object + text, or soft panel groups. +- Cards may be used, but should be soft and purposeful. +- Keep border radius moderate: 12-24 px for panels, larger for decorative shapes. +- Use soft shadows sparingly and consistently. + +## Icon Strategy + +For `ppt-master`, prefer `tabler-outline` or simple custom line icons. + +- Icons should be thin, charcoal or sage. +- Avoid filled icon badges unless they are very subtle. +- Use at most 1-3 icons per slide. + +## Imagery + +Best image types: + +- Product UI screenshots +- Clean workspace details +- Soft product photography +- Minimal abstract renderings + +Treatment: + +- Use images inside soft rounded rectangles or edge-aligned frames. +- Pair with 3D corner accents, not full decorative backgrounds. +- Avoid busy lifestyle photos and overly colorful stock imagery.