初始化项目版本

2026-07-29 16:04:39 +08:00
commit 4305a1082b
2629 changed files with 760590 additions and 0 deletions
--- a/.agents/skills/stitch-extract-design-md/references/plain-css.md
+++ b/.agents/skills/stitch-extract-design-md/references/plain-css.md
@@ -0,0 +1,161 @@
+# Plain CSS / SASS / Less Extraction Patterns
+
+For projects without a JavaScript framework — static sites, WordPress
+themes, vanilla HTML/CSS, or CSS preprocessor-heavy projects.
+
+## File Discovery Order
+
+1. **`index.html` / `*.html`** — Check `<link>` tags and `<style>` blocks
+   for stylesheet references, inline styles, and font loading.
+
+2. **Main stylesheet** (`style.css`, `main.css`, `app.css`) — The primary
+   CSS file. Look for custom properties, base styles, and typography.
+
+3. **`_variables.scss` / `_tokens.scss` / `variables.less`** — Preprocessor
+   variable files containing design tokens.
+
+4. **`_mixins.scss`** — Reusable style patterns reveal design conventions.
+
+5. **Component/module stylesheets** — Individual CSS files for UI components.
+
+## CSS Custom Properties (Modern CSS)
+
+Modern vanilla CSS projects often define a design system via custom properties:
+
+```css
+:root {
+  /* Colors */
+  --color-primary: #294056;
+  --color-bg: #FCFAFA;
+  --color-surface: #F5F5F5;
+  --color-text: #2C2C2C;
+  --color-text-secondary: #6B6B6B;
+  --color-border: #E0E0E0;
+  --color-success: #10B981;
+  --color-error: #EF4444;
+
+  /* Typography */
+  --font-heading: 'Manrope', sans-serif;
+  --font-body: 'Inter', sans-serif;
+  --font-size-base: 1rem;
+  --line-height-body: 1.7;
+
+  /* Spacing */
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 4rem;
+  --spacing-xl: 6rem;
+
+  /* Shapes */
+  --radius-button: 8px;
+  --radius-card: 12px;
+
+  /* Shadows */
+  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
+}
+```
+
+This is the cleanest source of truth. Extract directly and name each token.
+
+## SASS/SCSS Token Patterns
+
+```scss
+// _variables.scss
+$colors: (
+  'primary': #294056,
+  'background': #FCFAFA,
+  'surface': #F5F5F5,
+  'text': #2C2C2C,
+  'text-muted': #6B6B6B,
+);
+
+$font-stack-heading: 'Manrope', sans-serif;
+$font-stack-body: 'Inter', sans-serif;
+
+$breakpoints: (
+  'mobile': 768px,
+  'tablet': 1024px,
+  'desktop': 1280px,
+);
+
+$spacers: (
+  'section': 5rem,
+  'component': 2rem,
+  'element': 1rem,
+);
+```
+
+SASS maps are essentially design token dictionaries. Extract all values.
+
+## Less Variable Patterns
+
+```less
+@primary-color: #294056;
+@bg-color: #FCFAFA;
+@text-color: #2C2C2C;
+@font-heading: 'Manrope', sans-serif;
+@border-radius-base: 8px;
+```
+
+Same extraction approach — map each variable to a descriptive name and role.
+
+## Static Sites and WordPress
+
+For static sites or WordPress themes:
+
+- **WordPress**: Check `style.css` header comment for theme metadata.
+  Look for `wp-content/themes/<name>/assets/css/` for stylesheets.
+  `functions.php` may enqueue Google Fonts.
+- **Jekyll/Hugo**: Check `_sass/` or `assets/css/` directories.
+- **Static HTML**: Everything is in the CSS files and `<style>` blocks.
+
+## Inline Style Scanning
+
+For projects heavy on inline styles (legacy codebases, email templates):
+
+Search HTML files for `style="..."` attributes. Group unique values by
+property type:
+
+```
+background-color: #FCFAFA, #F5F5F5, #294056
+color: #2C2C2C, #6B6B6B, white
+border-radius: 8px, 12px
+font-family: 'Manrope', 'Inter'
+```
+
+Then deduplicate and assign roles.
+
+## Color Extraction Strategy
+
+When there's no explicit token system, you need to discover colors across
+all stylesheets. Search for:
+
+```
+background-color:
+background:
+color:
+border-color:
+border:
+outline-color:
+box-shadow:
+fill:
+stroke:
+```
+
+Collect all unique hex values, `rgb()`, `rgba()`, and `hsl()` values.
+Group by proximity (similar colors within a few shades) and assign roles
+based on context (which selectors use them).
+
+## Responsive Patterns
+
+Look for `@media` queries in all stylesheets. Common patterns:
+
+```css
+@media (max-width: 768px) { ... }   /* Mobile-first breakpoint */
+@media (min-width: 1024px) { ... }  /* Desktop enhancement */
+@media (prefers-color-scheme: dark) { ... } /* Dark mode support */
+```
+
+Document all breakpoints and the content strategy at each (column
+changes, padding adjustments, navigation transformations).