first commit
This commit is contained in:
software-ai-life
commit
4802f2c3b2
26 changed files with 2200 additions and 0 deletions
105
README.md
Normal file
105
README.md
Normal file
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
### Washi Paper & Soft Glow
|
||||
|
||||
|
||||
|
||||
### Soft 3D / Claymorphism
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
75
japanese-style-ppt-skill/SKILL.md
Normal file
75
japanese-style-ppt-skill/SKILL.md
Normal file
|
|
@ -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.
|
||||
8
japanese-style-ppt-skill/agents/openai.yaml
Normal file
8
japanese-style-ppt-skill/agents/openai.yaml
Normal file
|
|
@ -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
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 131 KiB |
|
|
@ -0,0 +1,115 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<rect x="0" y="0" width="1280" height="720" fill="#FFFFFF" />
|
||||
|
||||
<g id="header">
|
||||
<text x="56" y="48" font-family="Consolas, Courier New, monospace" font-size="11" fill="#8A8580">ISSUE 02 / ARCHITECTURE SHIFT</text>
|
||||
<rect x="56" y="65" width="34" height="5" fill="#CC5500" />
|
||||
<text font-weight="700" font-family="Arial, Microsoft YaHei, sans-serif" fill="#333333" font-size="38" x="56" y="110">Decoupling turns fragile containers</text><text font-weight="700" font-family="Arial, Microsoft YaHei, sans-serif" fill="#333333" font-size="38" x="56" y="153">into replaceable interfaces.</text><text x="56" y="173" font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" font-size="18" fill="#6B6B6B">The key move is a smaller contract between the brain, session, and hands.</text>
|
||||
</g>
|
||||
|
||||
<g id="left-before">
|
||||
<text x="70" y="214" font-family="Consolas, Courier New, monospace" font-size="14" fill="#CC5500">BEFORE</text>
|
||||
<rect x="56" y="240" width="450" height="280" fill="#F4F2EF" stroke="#D9D9D6" stroke-width="1" />
|
||||
<text x="86" y="286" font-family="Arial, Microsoft YaHei, sans-serif" font-size="24" font-weight="700" fill="#333333">Single container</text>
|
||||
<text font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" fill="#6B6B6B" font-size="18" x="86" y="323">Session, harness, and sandbox</text><text font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" fill="#6B6B6B" font-size="18" x="86" y="351">share one environment.</text><g id="before-stack">
|
||||
<rect x="90" y="385" width="360" height="46" fill="#FFFFFF" stroke="#D9D9D6" stroke-width="1" />
|
||||
|
||||
<g transform="translate(106.0, 396.0) scale(0.9166666666666666)" fill="none" stroke="#CC5500">
|
||||
<path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0" />
|
||||
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
|
||||
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
|
||||
</g>
|
||||
<text x="142" y="414" font-family="Arial, Microsoft YaHei, sans-serif" font-size="16" font-weight="700" fill="#333333">Session log</text>
|
||||
<rect x="90" y="431" width="360" height="46" fill="#FFFFFF" stroke="#D9D9D6" stroke-width="1" />
|
||||
|
||||
<g transform="translate(106.0, 442.0) scale(0.9166666666666666)" fill="none" stroke="#CC5500">
|
||||
<path d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8" />
|
||||
<path d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8" />
|
||||
<path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5" />
|
||||
<path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0" />
|
||||
<path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5" />
|
||||
<path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10" />
|
||||
</g>
|
||||
<text x="142" y="460" font-family="Arial, Microsoft YaHei, sans-serif" font-size="16" font-weight="700" fill="#333333">Harness loop</text>
|
||||
<rect x="90" y="477" width="360" height="46" fill="#FFFFFF" stroke="#D9D9D6" stroke-width="1" />
|
||||
|
||||
<g transform="translate(106.0, 488.0) scale(0.9166666666666666)" fill="none" stroke="#CC5500">
|
||||
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
|
||||
<path d="M12 12l8 -4.5" />
|
||||
<path d="M12 12l0 9" />
|
||||
<path d="M12 12l-8 -4.5" />
|
||||
</g>
|
||||
<text x="142" y="506" font-family="Arial, Microsoft YaHei, sans-serif" font-size="16" font-weight="700" fill="#333333">Sandbox and tools</text>
|
||||
</g>
|
||||
<text font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" fill="#71362B" font-size="15" x="86" y="560">Failure mode: a stuck or dead container</text><text font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" fill="#71362B" font-size="15" x="86" y="583">can hide the root cause and lose state.</text></g>
|
||||
|
||||
<g id="center-arrow">
|
||||
<line x1="538" y1="380" x2="645" y2="380" stroke="#CC5500" stroke-width="2" />
|
||||
<polygon points="645,380 630,371 630,389" fill="#CC5500" />
|
||||
<text x="540" y="352" font-family="Consolas, Courier New, monospace" font-size="13" fill="#8A8580">DECOUPLE</text>
|
||||
</g>
|
||||
|
||||
<g id="right-after">
|
||||
<text x="706" y="214" font-family="Consolas, Courier New, monospace" font-size="14" fill="#CC5500">AFTER</text>
|
||||
<line x1="692" y1="240" x2="1224" y2="240" stroke="#D9D9D6" stroke-width="1" />
|
||||
|
||||
<g id="node-brain">
|
||||
<rect x="704" y="278" width="170" height="104" fill="#FFFFFF" stroke="#D9D9D6" stroke-width="1" />
|
||||
|
||||
<g transform="translate(724.0, 300.0) scale(1.25)" fill="none" stroke="#CC5500">
|
||||
<path d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8" />
|
||||
<path d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8" />
|
||||
<path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5" />
|
||||
<path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0" />
|
||||
<path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5" />
|
||||
<path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10" />
|
||||
</g>
|
||||
<text x="766" y="319" font-family="Arial, Microsoft YaHei, sans-serif" font-size="18" font-weight="700" fill="#333333">Brain</text>
|
||||
<text x="724" y="354" font-family="Consolas, Courier New, monospace" font-size="13" fill="#6B6B6B">harness loop</text>
|
||||
</g>
|
||||
|
||||
<g id="node-session">
|
||||
<rect x="935" y="278" width="170" height="104" fill="#FFFFFF" stroke="#D9D9D6" stroke-width="1" />
|
||||
|
||||
<g transform="translate(955.0, 300.0) scale(1.25)" fill="none" stroke="#CC5500">
|
||||
<path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0" />
|
||||
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
|
||||
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
|
||||
</g>
|
||||
<text x="997" y="319" font-family="Arial, Microsoft YaHei, sans-serif" font-size="18" font-weight="700" fill="#333333">Session</text>
|
||||
<text x="955" y="354" font-family="Consolas, Courier New, monospace" font-size="13" fill="#6B6B6B">append-only log</text>
|
||||
</g>
|
||||
|
||||
<g id="node-hands">
|
||||
<rect x="820" y="466" width="170" height="104" fill="#FFFFFF" stroke="#D9D9D6" stroke-width="1" />
|
||||
|
||||
<g transform="translate(840.0, 488.0) scale(1.25)" fill="none" stroke="#CC5500">
|
||||
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
|
||||
<path d="M12 12l8 -4.5" />
|
||||
<path d="M12 12l0 9" />
|
||||
<path d="M12 12l-8 -4.5" />
|
||||
</g>
|
||||
<text x="882" y="507" font-family="Arial, Microsoft YaHei, sans-serif" font-size="18" font-weight="700" fill="#333333">Hands</text>
|
||||
<text x="840" y="542" font-family="Consolas, Courier New, monospace" font-size="13" fill="#6B6B6B">sandbox + tools</text>
|
||||
</g>
|
||||
|
||||
<line x1="874" y1="330" x2="935" y2="330" stroke="#CC5500" stroke-width="2" />
|
||||
<polygon points="935,330 920,321 920,339" fill="#CC5500" />
|
||||
<line x1="789" y1="382" x2="858" y2="466" stroke="#CC5500" stroke-width="2" />
|
||||
<polygon points="858,466 843,459 852,450" fill="#CC5500" />
|
||||
<line x1="1020" y1="382" x2="948" y2="466" stroke="#CC5500" stroke-width="2" />
|
||||
<polygon points="948,466 954,450 963,459" fill="#CC5500" />
|
||||
|
||||
<g id="interface-strip">
|
||||
<rect x="704" y="602" width="500" height="38" fill="#F4F2EF" />
|
||||
<text x="724" y="626" font-family="Consolas, Courier New, monospace" font-size="14" fill="#333333">execute(name,input) -> string</text>
|
||||
<text x="1010" y="626" font-family="Consolas, Courier New, monospace" font-size="14" fill="#71362B">wake(sessionId)</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="footer">
|
||||
<line x1="56" y1="685" x2="1224" y2="685" stroke="#D9D9D6" stroke-width="1" />
|
||||
<text x="56" y="704" font-family="Consolas, Courier New, monospace" font-size="11" fill="#8A8580">Source: Anthropic Engineering, Scaling Managed Agents</text>
|
||||
<text x="1224" y="704" text-anchor="end" font-family="Consolas, Courier New, monospace" font-size="11" fill="#8A8580">02 / 03</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 118 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 132 KiB |
|
|
@ -0,0 +1,86 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<rect x="0" y="0" width="1280" height="720" fill="#F5F5F5" />
|
||||
<g id="paper-texture">
|
||||
<circle cx="86" cy="116" r="1" fill="#D8D6D0" fill-opacity="0.4" />
|
||||
<circle cx="336" cy="604" r="1" fill="#D8D6D0" fill-opacity="0.34" />
|
||||
<circle cx="975" cy="94" r="1.1" fill="#D8D6D0" fill-opacity="0.34" />
|
||||
<line x1="44" y1="198" x2="1236" y2="192" stroke="#D8D6D0" stroke-width="1" stroke-opacity="0.2" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="60" y="52" font-family="Consolas, Courier New, monospace" font-size="11" fill="#9A9690">02 / ARCHITECTURE</text>
|
||||
<rect x="60" y="69" width="8" height="8" fill="#2C3E50" />
|
||||
<text font-weight="700" font-size="34" fill="#333333" font-family="Georgia, Microsoft YaHei, serif" x="60" y="116">Separating session, harness, and sandbox</text><text font-weight="700" font-size="34" fill="#333333" font-family="Georgia, Microsoft YaHei, serif" x="60" y="156">makes failure recoverable.</text></g>
|
||||
|
||||
<g id="matrix">
|
||||
<line x1="60" y1="202" x2="1220" y2="202" stroke="#D8D6D0" stroke-width="1" />
|
||||
<line x1="640" y1="202" x2="640" y2="610" stroke="#D8D6D0" stroke-width="1" />
|
||||
|
||||
<text x="82" y="244" font-family="Consolas, Courier New, monospace" font-size="14" fill="#2C3E50">COUPLED CONTAINER</text>
|
||||
<text x="680" y="244" font-family="Consolas, Courier New, monospace" font-size="14" fill="#2C3E50">DECOUPLED INTERFACES</text>
|
||||
|
||||
<g id="coupled">
|
||||
<rect x="92" y="292" width="420" height="184" fill="#EFEDEA" stroke="#D8D6D0" stroke-width="1" />
|
||||
<text x="122" y="332" font-family="Georgia, Microsoft YaHei, serif" font-size="24" fill="#333333">One environment</text>
|
||||
<text font-size="18" fill="#6B6B6B" font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" x="122" y="370">Session, harness, and sandbox</text><text font-size="18" fill="#6B6B6B" font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" x="122" y="398">share fate. Debugging and recovery</text><text font-size="18" fill="#6B6B6B" font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" x="122" y="426">depend on the same container.</text><line x1="122" y1="444" x2="470" y2="444" stroke="#AA6F5F" stroke-width="1" />
|
||||
<text x="122" y="468" font-family="Consolas, Courier New, monospace" font-size="13" fill="#AA6F5F">state loss / stuck sessions / hidden root cause</text>
|
||||
</g>
|
||||
|
||||
<g id="decoupled">
|
||||
<g id="brain">
|
||||
<rect x="704" y="292" width="142" height="90" fill="#F5F5F5" stroke="#2C3E50" stroke-width="1" />
|
||||
|
||||
<g transform="translate(724.0, 313.0)" fill="none" stroke="#2C3E50">
|
||||
<path d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8" />
|
||||
<path d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8" />
|
||||
<path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5" />
|
||||
<path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0" />
|
||||
<path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5" />
|
||||
<path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10" />
|
||||
</g>
|
||||
<text x="760" y="333" font-family="Georgia, Microsoft YaHei, serif" font-size="20" fill="#333333">Brain</text>
|
||||
<text x="724" y="361" font-family="Consolas, Courier New, monospace" font-size="12" fill="#6B6B6B">harness</text>
|
||||
</g>
|
||||
<g id="session">
|
||||
<rect x="936" y="292" width="142" height="90" fill="#F5F5F5" stroke="#2C3E50" stroke-width="1" />
|
||||
|
||||
<g transform="translate(956.0, 313.0)" fill="none" stroke="#2C3E50">
|
||||
<path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0" />
|
||||
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
|
||||
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
|
||||
</g>
|
||||
<text x="992" y="333" font-family="Georgia, Microsoft YaHei, serif" font-size="20" fill="#333333">Session</text>
|
||||
<text x="956" y="361" font-family="Consolas, Courier New, monospace" font-size="12" fill="#6B6B6B">event log</text>
|
||||
</g>
|
||||
<g id="hands">
|
||||
<rect x="820" y="456" width="142" height="90" fill="#F5F5F5" stroke="#2C3E50" stroke-width="1" />
|
||||
|
||||
<g transform="translate(840.0, 477.0)" fill="none" stroke="#2C3E50">
|
||||
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
|
||||
<path d="M12 12l8 -4.5" />
|
||||
<path d="M12 12l0 9" />
|
||||
<path d="M12 12l-8 -4.5" />
|
||||
</g>
|
||||
<text x="876" y="497" font-family="Georgia, Microsoft YaHei, serif" font-size="20" fill="#333333">Hands</text>
|
||||
<text x="840" y="525" font-family="Consolas, Courier New, monospace" font-size="12" fill="#6B6B6B">sandbox</text>
|
||||
</g>
|
||||
<line x1="846" y1="337" x2="936" y2="337" stroke="#2C3E50" stroke-width="1.5" />
|
||||
<polygon points="936,337 924,330 924,344" fill="#2C3E50" />
|
||||
<line x1="778" y1="382" x2="850" y2="456" stroke="#2C3E50" stroke-width="1.5" />
|
||||
<polygon points="850,456 837,451 846,442" fill="#2C3E50" />
|
||||
<line x1="1010" y1="382" x2="932" y2="456" stroke="#2C3E50" stroke-width="1.5" />
|
||||
<polygon points="932,456 937,443 946,452" fill="#2C3E50" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="interface-note">
|
||||
<rect x="680" y="580" width="506" height="42" fill="#EFEDEA" stroke="#D8D6D0" stroke-width="1" />
|
||||
<text x="704" y="607" font-family="Consolas, Courier New, monospace" font-size="14" fill="#333333">execute(name,input) -> string / wake(sessionId)</text>
|
||||
</g>
|
||||
|
||||
<g id="footer">
|
||||
<line x1="60" y1="685" x2="1220" y2="685" stroke="#D8D6D0" stroke-width="1" />
|
||||
<text x="60" y="704" font-family="Consolas, Courier New, monospace" font-size="11" fill="#9A9690">Source: Anthropic Engineering, Scaling Managed Agents</text>
|
||||
<text x="1220" y="704" text-anchor="end" font-family="Consolas, Courier New, monospace" font-size="11" fill="#9A9690">02 / 03</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 120 KiB |
163
japanese-style-ppt-skill/assets/style2-template.html
Normal file
163
japanese-style-ppt-skill/assets/style2-template.html
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<!doctype html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Japanese Lifestyle Editorial Deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--white: #FFFFFF;
|
||||
--orange: #CC5500;
|
||||
--charcoal: #333333;
|
||||
--clay: #71362B;
|
||||
--line: #D9D9D6;
|
||||
--field: #F4F2EF;
|
||||
--sans: Arial, "Microsoft YaHei", sans-serif;
|
||||
--body: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
|
||||
--mono: Consolas, "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--white);
|
||||
color: var(--charcoal);
|
||||
font-family: var(--body);
|
||||
overflow: hidden;
|
||||
}
|
||||
.deck {
|
||||
display: flex;
|
||||
width: 300vw;
|
||||
height: 100vh;
|
||||
transition: transform 700ms cubic-bezier(.2,.8,.2,1);
|
||||
}
|
||||
.slide {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
flex: 0 0 100vw;
|
||||
position: relative;
|
||||
padding: 6.5vh 6vw;
|
||||
background: var(--white);
|
||||
overflow: hidden;
|
||||
}
|
||||
.kicker {
|
||||
font-family: var(--mono);
|
||||
color: var(--orange);
|
||||
font-size: 12px;
|
||||
letter-spacing: .18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1, h2 {
|
||||
margin: 0;
|
||||
font-family: var(--sans);
|
||||
font-weight: 800;
|
||||
line-height: .98;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
h1 { font-size: clamp(58px, 7vw, 104px); max-width: 820px; }
|
||||
h2 { font-size: clamp(38px, 4.6vw, 72px); max-width: 900px; }
|
||||
p {
|
||||
font-size: clamp(18px, 1.45vw, 24px);
|
||||
line-height: 1.5;
|
||||
color: #666;
|
||||
max-width: 620px;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 7fr;
|
||||
gap: 5vw;
|
||||
height: 78vh;
|
||||
align-items: center;
|
||||
}
|
||||
.edge-image {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 46vw;
|
||||
height: 100vh;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(204,85,0,.92), rgba(113,54,43,.72)),
|
||||
repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.22) 22px 24px);
|
||||
}
|
||||
.tick {
|
||||
width: 56px;
|
||||
height: 5px;
|
||||
background: var(--orange);
|
||||
margin: 28px 0;
|
||||
}
|
||||
.hairline {
|
||||
height: 1px;
|
||||
background: var(--line);
|
||||
width: 100%;
|
||||
margin: 28px 0;
|
||||
}
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
border-top: 1px solid var(--line);
|
||||
border-left: 1px solid var(--line);
|
||||
margin-top: 9vh;
|
||||
}
|
||||
.feature {
|
||||
min-height: 250px;
|
||||
padding: 28px;
|
||||
border-right: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.num {
|
||||
font-family: var(--mono);
|
||||
color: var(--orange);
|
||||
font-size: 13px;
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
left: 6vw;
|
||||
right: 6vw;
|
||||
bottom: 4vh;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #8A8580;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="deck">
|
||||
<section class="slide">
|
||||
<div class="edge-image"></div>
|
||||
<div style="position:relative; z-index:1; max-width:52vw; margin-top:12vh">
|
||||
<div class="kicker">Japanese Lifestyle Editorial</div>
|
||||
<div class="tick"></div>
|
||||
<h1>Sharp white space. Burnt orange tension.</h1>
|
||||
<p>Use asymmetric edge-pressed imagery with a strict grid to balance liveliness and professional control.</p>
|
||||
</div>
|
||||
<div class="footer"><span>Style 2 / 16:9</span><span>01 / 03</span></div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="kicker">Structured grid</div>
|
||||
<h2>Editorial energy comes from alignment, not decoration.</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature"><div class="num">01</div><p>White background</p></div>
|
||||
<div class="feature"><div class="num">02</div><p>Burnt orange accent</p></div>
|
||||
<div class="feature"><div class="num">03</div><p>Charcoal typography</p></div>
|
||||
<div class="feature"><div class="num">04</div><p>Asymmetric image crop</p></div>
|
||||
</div>
|
||||
<div class="footer"><span>Grid system</span><span>02 / 03</span></div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="grid">
|
||||
<div>
|
||||
<div class="kicker">Closing</div>
|
||||
<div class="tick"></div>
|
||||
<h2>活潑，但嚴謹。</h2>
|
||||
<p>用純白、焦橙和深炭灰建立專業平衡。</p>
|
||||
</div>
|
||||
<div style="height:72vh; background:var(--field); border-left:5px solid var(--orange);"></div>
|
||||
</div>
|
||||
<div class="footer"><span>End</span><span>03 / 03</span></div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
145
japanese-style-ppt-skill/assets/template.html
Normal file
145
japanese-style-ppt-skill/assets/template.html
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<!doctype html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Washi Paper & Soft Glow Deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--paper: #F5F5F5;
|
||||
--paper-2: #EFEDEA;
|
||||
--ink: #333333;
|
||||
--muted: #6B6B6B;
|
||||
--line: #D8D6D0;
|
||||
--indigo: #2C3E50;
|
||||
--lavender: #D5D0DB;
|
||||
--serif: Georgia, "Microsoft YaHei", serif;
|
||||
--sans: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
|
||||
--mono: Consolas, "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
overflow: hidden;
|
||||
}
|
||||
.deck {
|
||||
display: flex;
|
||||
width: 300vw;
|
||||
height: 100vh;
|
||||
transition: transform 700ms cubic-bezier(.2,.8,.2,1);
|
||||
}
|
||||
.slide {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
flex: 0 0 100vw;
|
||||
position: relative;
|
||||
padding: 7vh 7vw;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 20% 12%, rgba(213,208,219,.26), transparent 28%),
|
||||
radial-gradient(circle at 80% 76%, rgba(44,62,80,.06), transparent 34%),
|
||||
var(--paper);
|
||||
}
|
||||
.slide::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(51,51,51,.13) 0 1px, transparent 1.2px);
|
||||
background-size: 42px 42px;
|
||||
opacity: .18;
|
||||
}
|
||||
.kicker {
|
||||
font-family: var(--mono);
|
||||
color: var(--indigo);
|
||||
font-size: 12px;
|
||||
letter-spacing: .18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1, h2 {
|
||||
font-family: var(--serif);
|
||||
margin: 0;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.05;
|
||||
}
|
||||
h1 { font-size: clamp(54px, 7vw, 104px); max-width: 860px; }
|
||||
h2 { font-size: clamp(36px, 4.4vw, 68px); max-width: 880px; }
|
||||
p {
|
||||
font-size: clamp(18px, 1.45vw, 24px);
|
||||
line-height: 1.55;
|
||||
color: var(--muted);
|
||||
max-width: 680px;
|
||||
}
|
||||
.rule-v {
|
||||
position: absolute;
|
||||
left: 5.6vw;
|
||||
top: 14vh;
|
||||
width: 3px;
|
||||
height: 58vh;
|
||||
background: var(--indigo);
|
||||
}
|
||||
.frame {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255,255,255,.34);
|
||||
border-radius: 10px;
|
||||
padding: 34px;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 0.95fr 1.05fr;
|
||||
gap: 7vw;
|
||||
align-items: center;
|
||||
height: 74vh;
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
left: 7vw;
|
||||
right: 7vw;
|
||||
bottom: 4.2vh;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #9A9690;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="deck" id="deck">
|
||||
<section class="slide">
|
||||
<div class="rule-v"></div>
|
||||
<div style="margin-left:4vw; margin-top:11vh">
|
||||
<div class="kicker">Washi Paper & Soft Glow</div>
|
||||
<h1>Title with quiet editorial warmth</h1>
|
||||
<p>Use a soft paper surface, thin indigo geometry, and generous negative space.</p>
|
||||
</div>
|
||||
<div class="footer"><span>Professional minimalist deck</span><span>01 / 03</span></div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="kicker">Pattern / Asymmetric thesis</div>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<h2>One focused idea per slide.</h2>
|
||||
<p>Let the layout breathe before adding extra containers. Use rules and spacing as structure.</p>
|
||||
</div>
|
||||
<div class="frame">
|
||||
<p style="color:var(--ink); margin:0">Diagram, quote, image crop, or evidence frame.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer"><span>Washi system</span><span>02 / 03</span></div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="kicker">Closing / Reflection</div>
|
||||
<h2 style="margin-top:18vh">Professional does not have to feel cold.</h2>
|
||||
<p>Use restraint, texture, and a single accent to create warmth without losing clarity.</p>
|
||||
<div class="footer"><span>End</span><span>03 / 03</span></div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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
|
||||
153
japanese-style-ppt-skill/references/ppt-master-integration.md
Normal file
153
japanese-style-ppt-skill/references/ppt-master-integration.md
Normal file
|
|
@ -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.
|
||||
46
japanese-style-ppt-skill/references/qa-checklist.md
Normal file
46
japanese-style-ppt-skill/references/qa-checklist.md
Normal file
|
|
@ -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.
|
||||
106
japanese-style-ppt-skill/references/slide-patterns.md
Normal file
106
japanese-style-ppt-skill/references/slide-patterns.md
Normal file
|
|
@ -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.
|
||||
102
japanese-style-ppt-skill/references/style-system.md
Normal file
102
japanese-style-ppt-skill/references/style-system.md
Normal file
|
|
@ -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.
|
||||
61
soft-3d-clay-ppt-skill/SKILL.md
Normal file
61
soft-3d-clay-ppt-skill/SKILL.md
Normal file
|
|
@ -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.
|
||||
5
soft-3d-clay-ppt-skill/agents/openai.yaml
Normal file
5
soft-3d-clay-ppt-skill/agents/openai.yaml
Normal file
|
|
@ -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"
|
||||
41
soft-3d-clay-ppt-skill/assets/examples/01_cover.svg
Normal file
41
soft-3d-clay-ppt-skill/assets/examples/01_cover.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 132 KiB |
100
soft-3d-clay-ppt-skill/assets/examples/02_interface_system.svg
Normal file
100
soft-3d-clay-ppt-skill/assets/examples/02_interface_system.svg
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
||||
<rect x="0" y="0" width="1280" height="720" fill="#FDF5E6" />
|
||||
|
||||
<g id="decor">
|
||||
<ellipse cx="1162" cy="590" rx="88" ry="32" fill="#C8BBA8" fill-opacity="0.24" />
|
||||
<circle cx="1140" cy="538" r="46" fill="#DBADAD" />
|
||||
<circle cx="1124" cy="520" r="12" fill="#FFFFFF" fill-opacity="0.28" />
|
||||
<path fill="#B2AC88" d="M1206,558 H1240 A16,16 0 0 1 1256,574 V574 A16,16 0 0 1 1240,590 H1206 A16,16 0 0 1 1190,574 V574 A16,16 0 0 1 1206,558 Z" />
|
||||
</g>
|
||||
|
||||
<g id="header">
|
||||
<text x="56" y="50" font-family="Consolas, Courier New, monospace" font-size="11" fill="#9A9288">02 / INTERFACE SYSTEM</text>
|
||||
<text font-family="Arial, Microsoft YaHei, sans-serif" font-weight="700" fill="#333333" font-size="38" x="56" y="108">Decoupling turns a fragile container</text><text font-family="Arial, Microsoft YaHei, sans-serif" font-weight="700" fill="#333333" font-size="38" x="56" y="152">into a friendly interface system.</text></g>
|
||||
|
||||
<g id="before-panel">
|
||||
<path fill="#C8BBA8" fill-opacity="0.24" d="M98,218 H456 A26,26 0 0 1 482,244 V510 A26,26 0 0 1 456,536 H98 A26,26 0 0 1 72,510 V244 A26,26 0 0 1 98,218 Z" />
|
||||
<path fill="#FFF9EF" stroke="#E7DAC8" stroke-width="1" d="M82,198 H440 A26,26 0 0 1 466,224 V490 A26,26 0 0 1 440,516 H82 A26,26 0 0 1 56,490 V224 A26,26 0 0 1 82,198 Z" />
|
||||
<text x="88" y="246" font-family="Consolas, Courier New, monospace" font-size="14" fill="#DBADAD">BEFORE</text>
|
||||
<text x="88" y="286" font-family="Arial, Microsoft YaHei, sans-serif" font-size="24" font-weight="700" fill="#333333">One container does everything</text>
|
||||
<text font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" fill="#6B6B6B" font-size="18" x="88" y="326">Session, harness, and sandbox</text><text font-family="Microsoft YaHei, PingFang SC, Arial, sans-serif" fill="#6B6B6B" font-size="18" x="88" y="354">share state and failure modes.</text><g id="stack">
|
||||
<path fill="#FFFFFF" stroke="#E7DAC8" stroke-width="1" d="M116,388 H406 A16,16 0 0 1 422,404 V416 A16,16 0 0 1 406,432 H116 A16,16 0 0 1 100,416 V404 A16,16 0 0 1 116,388 Z" />
|
||||
<text x="126" y="416" font-family="Consolas, Courier New, monospace" font-size="14" fill="#333333">session + harness + sandbox</text>
|
||||
<path fill="#FFFFFF" stroke="#E7DAC8" stroke-width="1" d="M116,446 H406 A16,16 0 0 1 422,462 V474 A16,16 0 0 1 406,490 H116 A16,16 0 0 1 100,474 V462 A16,16 0 0 1 116,446 Z" />
|
||||
<text x="126" y="474" font-family="Consolas, Courier New, monospace" font-size="14" fill="#333333">hard to debug / hard to recover</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="center-thread">
|
||||
<line x1="514" y1="360" x2="626" y2="360" stroke="#B2AC88" stroke-width="4" stroke-linecap="round" />
|
||||
<circle cx="514" cy="360" r="10" fill="#DBADAD" />
|
||||
<circle cx="626" cy="360" r="10" fill="#B2AC88" />
|
||||
<polygon points="636,360 618,350 618,370" fill="#B2AC88" />
|
||||
</g>
|
||||
|
||||
<g id="after-panel">
|
||||
<path fill="#C8BBA8" fill-opacity="0.22" d="M702,218 H1140 A28,28 0 0 1 1168,246 V550 A28,28 0 0 1 1140,578 H702 A28,28 0 0 1 674,550 V246 A28,28 0 0 1 702,218 Z" />
|
||||
<path fill="#FFF9EF" stroke="#E7DAC8" stroke-width="1" d="M678,198 H1116 A28,28 0 0 1 1144,226 V530 A28,28 0 0 1 1116,558 H678 A28,28 0 0 1 650,530 V226 A28,28 0 0 1 678,198 Z" />
|
||||
<text x="684" y="246" font-family="Consolas, Courier New, monospace" font-size="14" fill="#B2AC88">AFTER</text>
|
||||
|
||||
<g id="node-brain">
|
||||
<circle cx="768" cy="330" r="44" fill="#C8BBA8" fill-opacity="0.28" />
|
||||
<circle cx="760" cy="318" r="44" fill="#B2AC88" />
|
||||
<circle cx="744" cy="302" r="12" fill="#FFFFFF" fill-opacity="0.3" />
|
||||
|
||||
<g transform="translate(744.0, 302.0) scale(1.3333333333333333)" fill="none" stroke="#333333">
|
||||
<path d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8" />
|
||||
<path d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8" />
|
||||
<path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5" />
|
||||
<path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0" />
|
||||
<path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5" />
|
||||
<path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10" />
|
||||
</g>
|
||||
<text x="712" y="396" font-family="Arial, Microsoft YaHei, sans-serif" font-size="18" font-weight="700" fill="#333333">Brain</text>
|
||||
<text x="700" y="420" font-family="Consolas, Courier New, monospace" font-size="12" fill="#6B6B6B">harness</text>
|
||||
</g>
|
||||
|
||||
<g id="node-session">
|
||||
<circle cx="924" cy="330" r="44" fill="#C8BBA8" fill-opacity="0.28" />
|
||||
<circle cx="916" cy="318" r="44" fill="#DBADAD" />
|
||||
<circle cx="900" cy="302" r="12" fill="#FFFFFF" fill-opacity="0.3" />
|
||||
|
||||
<g transform="translate(900.0, 302.0) scale(1.3333333333333333)" fill="none" stroke="#333333">
|
||||
<path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0" />
|
||||
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
|
||||
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
|
||||
</g>
|
||||
<text x="862" y="396" font-family="Arial, Microsoft YaHei, sans-serif" font-size="18" font-weight="700" fill="#333333">Session</text>
|
||||
<text x="850" y="420" font-family="Consolas, Courier New, monospace" font-size="12" fill="#6B6B6B">event log</text>
|
||||
</g>
|
||||
|
||||
<g id="node-hands">
|
||||
<circle cx="1080" cy="330" r="44" fill="#C8BBA8" fill-opacity="0.28" />
|
||||
<circle cx="1072" cy="318" r="44" fill="#B2AC88" />
|
||||
<circle cx="1056" cy="302" r="12" fill="#FFFFFF" fill-opacity="0.3" />
|
||||
|
||||
<g transform="translate(1056.0, 302.0) scale(1.3333333333333333)" fill="none" stroke="#333333">
|
||||
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
|
||||
<path d="M12 12l8 -4.5" />
|
||||
<path d="M12 12l0 9" />
|
||||
<path d="M12 12l-8 -4.5" />
|
||||
</g>
|
||||
<text x="1028" y="396" font-family="Arial, Microsoft YaHei, sans-serif" font-size="18" font-weight="700" fill="#333333">Hands</text>
|
||||
<text x="1016" y="420" font-family="Consolas, Courier New, monospace" font-size="12" fill="#6B6B6B">tools</text>
|
||||
</g>
|
||||
|
||||
<line x1="804" y1="318" x2="872" y2="318" stroke="#B2AC88" stroke-width="3" stroke-linecap="round" />
|
||||
<polygon points="872,318 858,310 858,326" fill="#B2AC88" />
|
||||
<line x1="960" y1="318" x2="1028" y2="318" stroke="#B2AC88" stroke-width="3" stroke-linecap="round" />
|
||||
<polygon points="1028,318 1014,310 1014,326" fill="#B2AC88" />
|
||||
|
||||
<path fill="#FFFFFF" stroke="#E7DAC8" stroke-width="1" d="M726,474 H1066 A22,22 0 0 1 1088,496 V496 A22,22 0 0 1 1066,518 H726 A22,22 0 0 1 704,496 V496 A22,22 0 0 1 726,474 Z" />
|
||||
<text x="730" y="502" font-family="Consolas, Courier New, monospace" font-size="14" fill="#333333">execute(name,input) -> string</text>
|
||||
</g>
|
||||
|
||||
<g id="footer">
|
||||
<line x1="56" y1="685" x2="1224" y2="685" stroke="#E7DAC8" stroke-width="1" />
|
||||
<text x="56" y="704" font-family="Consolas, Courier New, monospace" font-size="11" fill="#9A9288">Source: Anthropic Engineering, Scaling Managed Agents</text>
|
||||
<text x="1224" y="704" text-anchor="end" font-family="Consolas, Courier New, monospace" font-size="11" fill="#9A9288">02 / 03</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.9 KiB |
82
soft-3d-clay-ppt-skill/assets/examples/03_why_it_scales.svg
Normal file
82
soft-3d-clay-ppt-skill/assets/examples/03_why_it_scales.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 121 KiB |
156
soft-3d-clay-ppt-skill/assets/template.html
Normal file
156
soft-3d-clay-ppt-skill/assets/template.html
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<!doctype html>
|
||||
<html lang="zh-Hant">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Soft 3D Clay PPT</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #FDF5E6;
|
||||
--surface: #FFF9EF;
|
||||
--sage: #B2AC88;
|
||||
--pink: #DBADAD;
|
||||
--ink: #333333;
|
||||
--muted: #6B6B6B;
|
||||
--line: #E7DAC8;
|
||||
--shadow: #C8BBA8;
|
||||
--sans: Arial, "Microsoft YaHei", sans-serif;
|
||||
--body: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
|
||||
--mono: Consolas, "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--body);
|
||||
overflow: hidden;
|
||||
}
|
||||
.deck {
|
||||
display: flex;
|
||||
width: 300vw;
|
||||
height: 100vh;
|
||||
transition: transform 700ms cubic-bezier(.2,.8,.2,1);
|
||||
}
|
||||
.slide {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
flex: 0 0 100vw;
|
||||
position: relative;
|
||||
padding: 7vh 7vw;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
}
|
||||
.kicker {
|
||||
font-family: var(--mono);
|
||||
color: var(--sage);
|
||||
font-size: 12px;
|
||||
letter-spacing: .16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1, h2 {
|
||||
margin: 0;
|
||||
font-family: var(--sans);
|
||||
font-weight: 800;
|
||||
line-height: 1.02;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
h1 { font-size: clamp(56px, 7vw, 100px); max-width: 760px; }
|
||||
h2 { font-size: clamp(38px, 4.5vw, 70px); max-width: 860px; }
|
||||
p {
|
||||
color: var(--muted);
|
||||
font-size: clamp(18px, 1.45vw, 24px);
|
||||
line-height: 1.5;
|
||||
max-width: 640px;
|
||||
}
|
||||
.clay {
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
background: var(--sage);
|
||||
box-shadow: 28px 34px 54px rgba(200,187,168,.52);
|
||||
}
|
||||
.clay::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 12%;
|
||||
border-radius: inherit;
|
||||
background: rgba(255,255,255,.34);
|
||||
transform: translate(-12%, -14%);
|
||||
}
|
||||
.clay.cube {
|
||||
width: 210px;
|
||||
height: 170px;
|
||||
right: 10vw;
|
||||
top: 18vh;
|
||||
border-radius: 42px;
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
.clay.sphere {
|
||||
width: 138px;
|
||||
height: 138px;
|
||||
right: 23vw;
|
||||
bottom: 17vh;
|
||||
background: var(--pink);
|
||||
}
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
padding: 30px;
|
||||
box-shadow: 18px 22px 45px rgba(200,187,168,.22);
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
margin-top: 9vh;
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
left: 7vw;
|
||||
right: 7vw;
|
||||
bottom: 4vh;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #9A9288;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="deck">
|
||||
<section class="slide">
|
||||
<div class="clay cube"></div>
|
||||
<div class="clay sphere"></div>
|
||||
<div style="margin-top:13vh">
|
||||
<div class="kicker">Soft 3D / Claymorphism</div>
|
||||
<h1>Airy slides with soft matte depth.</h1>
|
||||
<p>Use lightweight 3D geometry as a professional accent, not decoration for its own sake.</p>
|
||||
</div>
|
||||
<div class="footer"><span>Minimal professional deck</span><span>01 / 03</span></div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="kicker">Soft UI Panels</div>
|
||||
<h2>Keep the information flat. Let depth frame the mood.</h2>
|
||||
<div class="grid">
|
||||
<div class="panel"><p>Warm beige base</p></div>
|
||||
<div class="panel"><p>Sage green accent</p></div>
|
||||
<div class="panel"><p>Morandi pink warmth</p></div>
|
||||
</div>
|
||||
<div class="footer"><span>Style system</span><span>02 / 03</span></div>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<div class="clay sphere" style="right:9vw; top:16vh; bottom:auto;"></div>
|
||||
<div style="margin-top:17vh">
|
||||
<div class="kicker">Closing</div>
|
||||
<h2>Modern, soft, and still serious.</h2>
|
||||
<p>Use whitespace, charcoal typography, and restrained 3D accents to keep the deck sophisticated.</p>
|
||||
</div>
|
||||
<div class="footer"><span>End</span><span>03 / 03</span></div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
92
soft-3d-clay-ppt-skill/references/ppt-master-integration.md
Normal file
92
soft-3d-clay-ppt-skill/references/ppt-master-integration.md
Normal file
|
|
@ -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
|
||||
```
|
||||
38
soft-3d-clay-ppt-skill/references/qa-checklist.md
Normal file
38
soft-3d-clay-ppt-skill/references/qa-checklist.md
Normal file
|
|
@ -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.
|
||||
80
soft-3d-clay-ppt-skill/references/slide-patterns.md
Normal file
80
soft-3d-clay-ppt-skill/references/slide-patterns.md
Normal file
|
|
@ -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
|
||||
104
soft-3d-clay-ppt-skill/references/style-system.md
Normal file
104
soft-3d-clay-ppt-skill/references/style-system.md
Normal file
|
|
@ -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.
|
||||
Loading…
Reference in a new issue