quintpact-vas

KO | EN

gitlite — search

#javascript #ui #gpt #csharp #anthropic #cpp #privacy #json #web #cross-platform

(★ 9)

VAS 2.7.0 — Local design studio and AI handoff toolkit with 14 curated visual choices, interactive sample websites, and a working proof app.

File Explorer

ZIP Download

- - README.md
- - check-staged.py
  - pre-commit.ps1
  - pre-commit.sh
- - CUSTOM_GUIDE.md
  - dep-update.md
  - dev-cycle.md
  - hotfix.md
  - migration-cycle.md
  - setup-from-application.md
  - ultra-plan.md
- access-control.md
- advisor-strategy.md
- agent-resources.json
- CONTEXT.md
- HANDOFF-WORKFLOW.md
- mcp_config_template.json
- - vas_designer.md
  - vas_implementer.md
  - vas_reviewer.md
- - vas_designer.toml
  - vas_implementer.toml
  - vas_reviewer.toml
- - ci.yml
  - pages.yml
  - release.yml
- - vas-2.7.0-cover.png
  - vas-workflow.svg
- - 2.6.1.md
  - 2.6.2.md
  - 2.6.3.md
  - 2.6.4.md
  - 2.7.0.md
  - 2.7.1.md
  - 2.7.2.md
  - 2.7.3.md
  - 2.7.4.md
  - 2.7.5.md
  - 2.7.6.md
- - creative-board-design.md
  - creative-board-handoff.json
  - creative-board-handoff.txt
  - creative-board-request.json
  - creative-board-results.json
  - privacy-font-fixes-2026-09-08.md
  - README.md
- agent-runtime-validation.md
- clean-copy-package-plan.md
- design-studio-controls.md
- design-system.md
- HANDOFF.md
- import-existing-project.md
- index.md
- INSTRUCTIONS.md
- log-archive-2026-05-19-to-2026-05-20.md
- log-archive-pre-2026-05-19.md
- log.md
- MIGRATION.md
- OPERATIONS.md
- agent_checks.py
- build-agent-resources.py
- build-knowledge-index.py
- build-proof-handoff.cjs
- Build-VAS-Release.bat
- build_release.py
- capture-design-samples.cjs
- check-version.py
- Run-VAS-Backup.bat
- search-knowledge.py
- Start-VAS.ps1
- vas-backup.py
- vas-migration-archive.py
- vas-project-import.py
- vas-project-knowledge.py
- VAS.AgentHandoff.Core.ps1
- VAS.AgentHandoff.psm1
- VAS.Memory.Privacy.ps1
- VAS.Memory.psm1
- VAS.Migration.psm1
- VAS.Projects.psm1
- VAS.Server.Handoff.ps1
- VAS.Server.psm1
- vas_agent_handoff.py
- vas_ai_contract.py
- vas_handoff_details.py
- vas_project_import.py
- vas_project_knowledge.py
- vas_sanitize_export.py
- - README.md
- - app.js
  - index.html
  - store.js
  - styles.css
- agent-contract.js
- agent-handoff-web.js
- agent-resources.js
- ai-result-import.js
- client-application-init.js
- client-application.html
- client-components.css
- client-draft.js
- client-export.js
- client-form.js
- client-print.css
- client-style.css
- design-collection.css
- design-collection.js
- design-controller.css
- design-controller.html
- design-controller.js
- design-presets.js
- design-preview.css
- design-preview.js
- design-profile-control.js
- design-sample-link.js
- design-sample-page.css
- design-sample-page.js
- design-sample.html
- design-samples.css
- design-samples.js
- design-taste-pack.js
- editorial-shell.css
- editorial-theme.js
- handoff-context-review.js
- handoff-loop.css
- handoff-workflow.js
- knowledge-index.js
- knowledge-search-ui.js
- knowledge-search.css
- knowledge-search.html
- memory-browser-adapter.js
- memory-center.css
- memory-center.html
- memory-center.js
- memory-identity.js
- personalization-store.js
- project-context.js
- project-import.css
- project-import.html
- project-import.js
- project-rail.js
- rag-lite.js
- README.md
- runtime-client.js
- setup-design.js
- setup-tools.css
- setup-tools.js
- storage-utils.js
- theme-state.js
- vas-config.js
- vas-hub-components.css
- vas-hub.css
- vas-hub.html
- vas-hub.js
- - private-memory-keys.json
  - secret-redaction-cases.json
- agent-handoff.spec.js
- agent-live-check.cjs
- browser-smoke.spec.js
- closed-loop-handoff.spec.js
- connected-boundaries.spec.js
- creative-board.spec.js
- design-collection.spec.js
- design-handoff-regression.spec.js
- design-preview-token.spec.js
- design-samples.spec.js
- integrated-runtime.spec.js
- memory-failure-regression.spec.js
- playwright.config.js
- privacy-regressions.spec.js
- README.md
- recovery-transactions.spec.js
- requirements-dev.txt
- run_10x_stress.py
- system-flow.spec.js
- test_agent_handoff.py
- test_agent_tools.py
- test_client_form.py
- test_handoff_contract.py
- test_html_syntax.py
- test_http_credentials.py
- test_integrity.py
- test_integrity_10loop.py
- test_personalization_core.py
- test_privacy_regressions.py
- test_project_import.py
- test_project_knowledge.py
- test_release_package.py
- test_release_runtime_flow.py
- test_runtime_source.py
- test_windows_runtime.py
.cursorrules
.gitattributes
.gitignore
.windsurfrules
00-처음-사용하기.txt
AGENTS.md
AUTHORS.md
CLAUDE.md
GEMINI.md
LICENSE
NOTICE.md
package-lock.json
package.json
README.md
Run-VAS-System.bat
USE_POLICY.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

# Project Badges

VAS 2.7.0 design collection cover: Morrow and ORBIT interface mockups with Aurora artwork; 10 design collections, 4 interactive samples, and 1 working proof app.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

**From design direction to working apps.**

VAS (Vibecoding Agent System) is a local tool for preparing a project brief, choosing a visual direction, and handing complete instructions to a coding AI. Describe the work, compare real design previews, refine the details, and copy a prompt into your coding tool with the actual project folder open.

**[Download VAS 2.7.6](https://github.com/zmsqnfl-commits/quintpact-vas/releases/tag/v2.7.6)** · **[Explore the Design Studio](https://zmsqnfl-commits.github.io/quintpact-vas/src/design-controller.html?v=2.7.6)** · **[Try Morrow](https://zmsqnfl-commits.github.io/quintpact-vas/src/proof-app/index.html?v=2.7.6)** · **[Read the release notes](docs/releases/2.7.6.md)**

## Connected workflow recheck in 2.7.6

This patch removes HTTP authorization values and URL credentials from outgoing handoffs, makes browser memory imports atomic, and reports draft-storage failures accurately. Failed imports preserve the previous records and can be retried with the same file. See the [patch notes](docs/releases/2.7.6.md) for validation and upgrade details.

## What VAS helps you do

- **Start with your project.** Prepare a new project request or describe changes to an existing application. The coding agent reads the real source before making implementation decisions.
- **Choose a design you can see.** Compare 10 new visual collections and 4 curated styles with interactive sample websites.
- **Carry the details into implementation.** The handoff includes the project requirements, selected design, confirmed tokens, references, role instructions, and verification expectations.
- **Keep implementation accountable.** The workflow asks the coding agent to inspect, plan, build, review, correct problems, and report the checks it actually ran.

VAS prepares the handoff. Implementation runs in your coding host, such as Codex, Claude, or Antigravity, using that host's available tools and permissions.

## Design directions with real previews

The Design Studio combines distinct compositions, typography, colors, imagery, spacing, and interaction guidance. You can refine the selected style and carry those settings into a sample before copying the handoff.

| Collection | Visual direction | Good fit |
| --- | --- | --- |
| Bento Studio | Irregular modular layouts, lavender and lime, expressive graphics | Creative studios and personal workspaces |
| Aurora Glass | Dark atmosphere and translucent panels | Immersive product interfaces |
| Clay Pop | Soft peach colors and rounded 3D objects | Learning and friendly consumer products |
| Noir Luxe | Dark surfaces, champagne accents, editorial serif type | Premium brands and product showcases |
| Botanical Atelier | Botanical photography, olive tones, warm ivory | Lifestyle and wellness |
| Retro Sunset | Warm retro colors and record-inspired compositions | Music and independent brands |
| Swiss Poster | Strong type, disciplined grids, exhibition-style hierarchy | Events, portfolios, and editorial pages |
| Cyber Deck | Technical consoles and high-contrast information | Developer tools and operational interfaces |
| Kinetic Type | Oversized typography with controllable motion | Creative campaigns and studio presentations |
| Paper Collage | Layered photographs and tactile editorial compositions | Visual storytelling and publications |

The main picker offers **14 curated choices**. The full set of 28 preset definitions remains available for compatibility with earlier saved selections. Fonts, artwork, and preview media are bundled locally, with font license files included.

### Four sample websites you can actually explore

Open these examples from the [Design Studio](https://zmsqnfl-commits.github.io/quintpact-vas/src/design-controller.html?v=2.7.6). Each recommendation includes a screenshot of its rendered site.

| Style | Sample | Working interactions |
| --- | --- | --- |
| Awwwards | **FORM / FIELD** architecture studio | Project disclosures, section navigation, inquiry preview |
| Linear | **ORBIT** project board | Task search, task creation, status changes |
| Stripe | **RELAY** subscription service | Monthly/yearly billing comparison, plan selection |
| Notion | **FIELDNOTES** team wiki | Document search, document opening, checklist updates |

These are demonstrations: inquiry previews do not send messages, and subscription examples do not process payments. Exploring another sample preserves the design settings you started with. Fictional sample content is a visual reference, not your project's business data.

## How the handoff works

| Step | What happens |
| --- | --- |
| **1. Describe** | Choose a new or existing project and enter the work you want done. |
| **2. Design** | Compare styles, open sample sites, and confirm colors, typography, spacing, and other settings. |
| **3. Review and copy** | Review the final brief and copy the generated prompt. Saving `VAS-AI-HANDOFF.json` is optional. |
| **4. Inspect and build** | Open the actual project in your coding host and paste the prompt. The agent reads the source, plans the work, and implements it. |
| **5. Verify and improve** | The agent checks the result, corrects identified issues, and reports evidence and remaining limits. |

You can close VAS after copying the prompt. Help can be reopened during setup, and work-memory preferences can be changed again on the completion screen.

### Agent roles and execution

VAS includes shared role instructions and native agent definitions for supported hosts. When a host supports only general subagents, the workflow requires the full role text, task scope, assigned files, design rules, and completion criteria to be passed into each delegated task.

The main agent remains responsible for collecting results, reviewing evidence, routing corrections, and repeating affected checks. Reviewers are instructed to inspect without editing source files. These instructions operate within the host's actual permissions; they do not create a separate security sandbox.

For existing applications, the **Read Before Generate** rule requires the coding agent to inspect the real files and preserve the project's technology stack. VAS does not infer the application's architecture from a folder path.

See the [handoff guide](docs/HANDOFF.md) and [agent workflow](.agents/HANDOFF-WORKFLOW.md) for the detailed execution contract.

## Morrow: built through the VAS workflow

[Morrow](https://zmsqnfl-commits.github.io/quintpact-vas/src/proof-app/index.html?v=2.7.6) is a working creative task board built with the Bento Studio direction. Its development used a real five-step VAS project form, an exported handoff, a generated design concept, separate implementation, and independent review.

You can create and edit tasks, set categories and due dates, combine search and status filters, mark work complete, archive and restore tasks, undo the latest deletion, and export records as JSON. Data persists in the browser, with empty states, input validation, and storage-error guidance.

Verification covered keyboard interaction, responsive layouts at 1440, 768, 390, and 320 pixels, and persistence after creating a 5,001st task. It found and corrected dialog focus handling, small mobile completion targets, and a save/reload limit mismatch.

Morrow stores data locally in the browser. It has no accounts, backend, AI API connection, JSON import, or cross-device synchronization. The cover above is a promotional composition based on the application and sample screens.

The [verification record](docs/verification/README.md) includes the request, original handoff, design specification, and execution results. The original development handoff retains its VAS 2.6.4 version and integrity hash.

## Get started on Windows

**Requirements:** Windows 10 or 11 with PowerShell 5.1 or later. The packaged distribution contains the local launcher, Design Studio, handoff tools, sample sites, and Morrow.

1. Open the [v2.7.6 release](https://github.com/zmsqnfl-commits/quintpact-vas/releases/tag/v2.7.6) and download `VAS-2.7.6-windows.zip`.
2. Extract the entire archive into a new folder.
3. Double-click `Run-VAS-System.bat`.
4. Choose a new project or an existing project, enter the request, and select a design.
5. Choose whether VAS may remember confirmed design choices, then review and copy the prompt.
6. Open the actual project folder in your coding tool and paste the prompt.

The separate `VAS-Client-Form-2.7.6.zip` contains a standalone project request form for sharing. Published downloads include `SHA256SUMS.txt` and `release-manifest.json` for artifact verification.

When upgrading, keep your previous installation folder and user data. Version 2.7.6 retains the handoff v3 and result v1 formats and existing design storage keys. The browser demos let you explore the designs and Morrow; the Windows ZIP provides the complete local workflow.

For the Korean quick-start guide, see [00-처음-사용하기.txt](00-처음-사용하기.txt).

## Privacy and project boundaries

- Work memory is opt-in and uses confirmed design selections for recommendations. Raw work-memory records are not included in the handoff.
- The existing project path belongs only in the copied prompt. It is excluded from exported JSON and work-memory records.
- Preparing a handoff does not run, copy, or modify the existing target project.
- Runtime pages use local assets and fonts without external font services or CDNs.

## Verification and development

Version **2.7.6** extends the shared credential fixtures with HTTP authentication cases and verifies failure recovery through real browser transactions. The selected design instructions and ordinary public references remain covered by the full regression suite. See the [release notes](docs/releases/2.7.6.md); actual agent execution remains controlled by the coding host.

See the [release notes](docs/releases/2.7.6.md) for the validation details and [GitHub Actions](https://github.com/zmsqnfl-commits/quintpact-vas/actions) for current CI results.

For source development, install the Node and Python test dependencies and Chromium, then run the checks from the repository directory:

```powershell
npm.cmd ci
python -m pip install -r tests/requirements-dev.txt
npx.cmd playwright install chromium

npm.cmd run agents:build
npm.cmd run knowledge:index
npm.cmd run test:python
npm.cmd run test:browser
npm.cmd run test:package
npm.cmd run agent:security
```

On Windows, use a local or mapped-drive path when npm cannot run from a UNC directory. The optional `npm.cmd run test:release` command includes the ten-run stress suite; run it only when explicitly needed. `agent:verify` runs the actual Python and browser checks, while `agent:security` checks the generated release's file boundaries and source hashes.

| Location | Purpose |
| --- | --- |
| `src/` | Runtime pages, Design Studio, sample sites, and Morrow |
| `.agents/skills/` | Shared design and role instructions |
| `.codex/agents/`, `.claude/agents/` | Native agent definitions for supported hosts |
| `docs/` | Guides, release notes, and verification records |
| `scripts/`, `tests/` | Build tools and automated checks |
| `dist/` | Generated distributions; excluded from Git |

Further reading: [documentation index](docs/index.md) · [test guide](tests/README.md) · [asset notices](src/assets/README.md).

## License

VAS is distributed under the [MIT License](LICENSE). See [NOTICE.md](NOTICE.md) for third-party notices.

quintpact-vas

File Explorer

# Use via CDN

# Project Badges

Was this content helpful?

Recent Feedback

Download README