design

分类: 工具与效率 | 上传者: jaimevalasek | 下载: 0 | 版本: v1.0（最新）

认知核心设计系统 - 一个模块化视觉识别系统，用于构建深色/浅色主题仪表板、首页、管理面板、机构网站、登陆页面和任何 Web 界面。每当需要构建、设计或设计任何 Web UI（仪表板、SaaS 面板、登陆页面、机构网站、投资组合页面、命令中心、管理工具或首页）时，请使用此技能。触发诸如“使用设计技能”、“认知核心风格”、“应用设计系统”、“深色仪表板”、“构建登陆页面”、“创建首页”、“mentes sinteticas 布局”、“构建管理面板”、“使用我们的视觉标识创建网站”或任何对样式 Web 界面的请求等短语。此技能路由到子模块 - 始终首先读取此文件，然后仅加载您需要的模块。

更新日志: Source: GitHub https://github.com/jaimevalasek/aioson

目录结构

当前层级: tree/main/template/.aioson/skills/design-system/

📁 components/
- 📄 SKILL.md 12.6 KB
📁 dashboards/
- 📄 SKILL.md 7.5 KB
📁 foundations/
- 📄 SKILL.md 7.7 KB
📁 motion/
- 📄 SKILL.md 6.0 KB
📁 patterns/
- 📄 SKILL.md 15.0 KB
📄 cognitive-core-ui.skill 10.4 KB
📄 SKILL.md 4.6 KB

SKILL.md

---
name: design
description: Cognitive Core Design System — a modular visual identity system for building dark/light themed dashboards, frontpages, admin panels, institutional sites, landing pages, and any web interface. Use this skill whenever asked to build, style, or design ANY web UI — dashboards, SaaS panels, landing pages, institutional websites, portfolio pages, command centers, admin tools, or frontpages. Triggers on phrases like "use the design skill", "cognitive core style", "apply the design system", "dark dashboard", "build a landing page", "create a frontpage", "mentes sinteticas layout", "build an admin panel", "create a website with our visual identity", or any request for a styled web interface. This skill routes to sub-modules — always read this file first, then load only the modules you need.
---

# Cognitive Core Design System

A modular visual identity system. Agents read THIS file first, then load only the sub-modules needed for the task.

## Architecture

```
skills/design/
├── SKILL.md                 ← YOU ARE HERE (router)
├── foundations/
│   └── SKILL.md             ← Colors, typography, spacing, themes, CSS variables
├── components/
│   └── SKILL.md             ← Cards, tables, sidebars, forms, modals, stats, badges
├── patterns/
│   └── SKILL.md             ← Page-level layouts: dashboard, settings, auth, list-detail, frontpage
├── motion/
│   └── SKILL.md             ← Animations: entrances, hovers, loading, transitions
└── dashboards/
    └── SKILL.md             ← Dashboard presets: control center, analytics, ops cockpit
```

## How Agents Use This System

### Step 1: Read this file (you're doing it)

### Step 2: Classify the task

Determine what type of UI is being built:

| Task Type | Load These Modules |
|---|---|
| **Dashboard / Admin panel** | foundations → components → patterns → dashboards |
| **Landing page / Frontpage** | foundations → components → patterns → motion |
| **Institutional / Corporate site** | foundations → components → patterns → motion |
| **Settings / Config page** | foundations → components → patterns |
| **Auth page (login/register)** | foundations → components → patterns |
| **Single component** | foundations → components |
| **Quick styling fix** | foundations |
| **Animation work** | foundations → motion |

### Step 3: Read the required modules IN ORDER

Always start with `foundations/SKILL.md` — it has the CSS variables everything else depends on. Then read the others as needed.

### Step 4: Build

Compose the interface using tokens from foundations, building blocks from components, layouts from patterns, and animations from motion. For dashboards, the dashboards module has ready-to-use presets.

## Visual Identity Summary

The Cognitive Core aesthetic has three pillars:

1. **Command Center Authority** — Dense data, monospaced labels, large stat readouts, structured grids
2. **Premium Refinement** — Layered surfaces (3+ depth levels), subtle borders, teal/cyan accent as the "pulse"
3. **Structured Hierarchy** — Tabs, sidebars, card grids, section headers with icons, labeled zones

This applies to ALL output types — dashboards get the full treatment, but frontpages and institutional pages use the same typography, color system, and component vocabulary in a more open layout.

## Theme System

Every output supports dark/light toggle via `data-theme` attribute:

```html
<div data-theme="dark"> <!-- or "light" -->
```

Toggle the attribute value to switch themes. The mechanism (state, JS toggle, server-side) depends on your stack.

Default to **dark** for dashboards/admin. Default to **light** for frontpages/institutional. Always include a theme toggle.

## Technology Boundary

This skill controls **visual identity only** — colors, typography, spacing, layout structure, component anatomy, and motion behavior. It does NOT dictate:

- Output format (HTML, JSX, Vue, Blade, Svelte, etc.)
- Framework or library choice
- Build tooling or bundling
- File structure or splitting strategy

The agent building the interface decides all technology concerns. This skill provides the **what it should look like**, the agent decides the **how to build it**.

Code examples in sub-modules use inline style objects for clarity. Treat them as **design specifications**, not copy-paste code. Adapt the property names and syntax to whatever technology the agent is targeting.

## Required Assets (all technologies)

- **Fonts**: Google Fonts — JetBrains Mono + Inter (import via CSS `@import` or `<link>` tag)
- **Icons**: Any icon library. Emoji placeholders in examples are just for illustration.

登录后下载/点赞/收藏 ❤ 5 | ★ 0

design

目录结构

SKILL.md

举报内容

提示