Archive and retire the legacy grida CLI (design-to-code)

[softmarshmallow]

Legacy Grida CLI: retirement and historical archive

This issue preserves the original grida npm CLI for future maintainers: what it did, where its implementation lives, and the documentation and landing-page content being retired.

Decision

The original design-to-code CLI is retired indefinitely as a standalone product. It has no scheduled return or ongoing maintenance commitment. The grida npm name and executable are being taken over by the replacement CLI developed in gridaco/grida.

The replacement starts with account/auth infrastructure and media-generation tools. The old init, add, design-to-code and Flutter-daemon workflows are not part of that initial scope; reusing the npm name does not imply command, configuration or credential compatibility. MCP is deferred follow-on work.

This retirement concerns the original CLI product, not the entire gridaco/code repository or its design-to-code engine. This issue is a historical record and a recovery entry point, not a commitment to restore the feature.

Source of record

The original npm implementation is confirmed in gridaco/code/cli. At this archived revision, its manifest declares:

Field	Archived value
npm package	grida
Source version	0.0.15
Executable	grida → ./dist/index.js
Repository	https://github.com/gridaco/code
Homepage	https://grida.co/cli
License	Apache-2.0
Implementation	TypeScript, yargs; bundled with ncc

0.0.15 is the source manifest version, not a claim about the latest npm registry version or current installability. No legacy release was installed or executed to prepare this archive.

The historical root README also uses @designto/cli / designto terminology and links to gridaco/cli. The package manifest and executable registration above identify the specific grida implementation archived here; the older names should not be treated as interchangeable release identities.

What the CLI did

The product presented designs as modules that could be imported into an application: initialize a project, select a Figma source and framework, generate code/assets, and import the resulting files from the project. It also offered a local Flutter preview daemon for the browser editor.

The registered command surface is:

Historical command	Purpose / recovery entry point
grida init	Project detection and setup, design source/framework configuration — cli/init
grida add [uri...]	Add generated design modules using project configuration — cli/add
grida code <framework> <uri>	Generate source from a design URI — cli/code
grida login / grida logout	Legacy Grida service authentication — cli/auth
grida flutter daemon	Local Flutter preview server — cli/flutter/daemon

The historical README lists some different command/flag spellings, including grida code auth and grida code init. Those are preserved as written below; the executable registration is the stronger evidence for the actual interface. Framework and performance claims in the archived pages are historical claims, not newly verified capabilities.

Historical context

• PR #174, merged 2022-08-11, introduced local Flutter-daemon preview integration. Its original example used grida flutter daemon start; the next day's command change shortened it to grida flutter daemon.
• Commit b9d92586, 2022-08-12, records v0.0.15 in the CLI source history.
• The 2023-12-14 docs move placed these guides under gridaco/grida/docs/cli. The implementation remained in gridaco/code, which explains why the later Grida repository had the documentation and marketing page without the original CLI source.
• The old product appeared at grida.co/cli, grida.co/docs/cli, the Flutter-daemon guide, and the Figma CI marketing page at grida.co/figma/ci. These addresses may be repurposed or show retirement notices; use the immutable source links in this issue for historical content.
• On 2026-09-09, this archive records the decision to retire the original CLI indefinitely while preparing the replacement grida product.

If design-to-code returns under the new CLI

It can return as a dedicated command family beneath the branded grida executable. Its name and scope remain undecided. Keep the design-to-code implementation independently owned; the new CLI should compose it through a thin command adapter rather than absorb its engine, framework builders, or legacy application dependencies.

The recovery path is already visible in the original code: cli/code/index.ts fetches Figma input, calls designToCode from @designto/code, applies builder-config / builder-config-preset, and writes generated source. Project configuration and discovery are under cli/config and cli/project.

Use those modules and the archived examples as the starting point for a fresh compatibility review. Legacy auth, automatic .env loading, project file writes and the Flutter daemon need explicit integration decisions; they are not inherited merely by restoring a command name. This archive makes the code and original intent discoverable, but does not assert that the old dependency graph will run unchanged on today's runtimes and APIs.

Archived content

The following content is historical, not current installation or usage guidance. Original wording, examples and limitations are retained; archival notes identify any link normalization. Commit-pinned sources preserve exact bytes, assets and page implementation even when the live URLs change.

Original CLI package README — full source

Immutable source

# grida CLI

Visit https://grida.co/cli for more information.

## Installation

```
npm install -g grida
```

## Commands

| Commands             |                                         |                                                      |
| -------------------- | --------------------------------------- | ---------------------------------------------------- |
| `grida code react`   | convert input uri (file or url) to code | `designto react https://www.figma.com/files/XXX`     |
| `grida code rn`      | convert input uri (file or url) to code | `designto rn https://www.figma.com/files/XXX`        |
| `grida code vue`     | convert input uri (file or url) to code | `grida code vue https://www.figma.com/files/XXX`     |
| `grida code svelte`  | convert input uri (file or url) to code | `grida code svelte https://www.figma.com/files/XXX`  |
| `grida code solid`   | convert input uri (file or url) to code | `grida code flutter https://www.figma.com/files/XXX` |
| `grida code flutter` | help                                    | `designto flutter https://www.figma.com/files/XXX`   |
| `grida code auth`    | signin to design services               | `auto` \| `figma` \| `sketch` \| `xd`                |
| `grida code init`    | configure the preferences               |

## Args

| Flags                     |                                                  |                                                                          |     |
| ------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | --- |
| `--framework`             | specify the target framework                     | `flutter` \| `react` \| `react-native` \| `svelte` \| `vue` \| `vanilla` | \*  |
| `--config`                | specify the framework config json file           | framework.config.json                                                    |     |
| `--design-origin`         | specify the input design origin                  | `auto` \| `figma` \| `sketch` \| `xd`                                    |     |
| `--personal-access-token` | access token                                     |                                                                          |     |
| `--user`                  | account name if signed-in with multiple accounts |

## Output

`--output, -o <path>`

- `<path>`: the output file path
- `<dir>`: the output files dir
- dry : do not write files. log the output

Original npm package manifest — full source

Immutable source

{
    "name": "grida",
    "version": "0.0.15",
    "private": false,
    "license": "Apache-2.0",
    "description": "grida CLI",
    "homepage": "https://grida.co/cli",
    "repository": "https://github.com/gridaco/code",
    "dependencies": {
        "@base-sdk-fp/auth": "^0.1.4",
        "@flutter-daemon/server": "^0.0.1",
        "dotenv": "^16.0.1",
        "enquirer": "^2.3.6",
        "glob": "^8.0.3",
        "json5": "^2.2.1",
        "keytar": "^7.9.0",
        "node-fetch": "2",
        "node-machine-id": "^1.1.12",
        "open": "^8.4.0",
        "ora": "^5.4.0",
        "semver": "^7.3.7",
        "which": "^2.0.2",
        "yaml": "^2.1.1",
        "yargs": "^17.2.1"
    },
    "scripts": {
        "clean": "rimraf dist",
        "dev": "ts-node index.ts",
        "dev:watch": "ts-node-dev index.ts --watch",
        "test": "jest",
        "build": "ncc build index.ts -o dist -e keytar -e glob -e dotenv",
        "prepack": "yarn test && yarn clean && yarn build"
    },
    "devDependencies": {
        "@types/glob": "^7.2.0",
        "@types/node": "^18.6.1",
        "@types/semver": "^7.3.10",
        "@types/which": "^2.0.1",
        "@types/yargs": "^17.0.3",
        "@vercel/ncc": "^0.34.0",
        "jest": "^28.1.3",
        "ts-jest": "^28.0.7",
        "ts-node": "^10.9.1",
        "ts-node-dev": "^2.0.0",
        "typescript": "^4.7.4"
    },
    "bin": {
        "grida": "./dist/index.js"
    },
    "files": [
        "dist",
        "README.md",
        "LICENSE"
    ],
    "publishConfig": {
        "access": "public"
    }
}

Archived user documentation and marketing

These pages describe the legacy design-to-code CLI. They are historical records,
not capabilities or setup instructions for the replacement Grida CLI. Source
links are pinned to each file's last-changing commit before retirement. Original
wording, examples, caveats and typos are preserved in the source transcripts.

Restoration context

• The docs describe designs as installable modules: project initialization, a
  Figma source and token, framework configuration, and generated code/assets.
• Project state included grida.config.js, a project-local .grida, changes to
  .env/.gitignore/package.json, and generated grida or lib/grida output.
  These are historical project conventions, distinct from the replacement CLI's
  account and provider credential stores.
• Both module selection and explicit Figma URLs/node IDs were documented. The
  docs recommend frame-level URLs to avoid importing an entire file or page.
• The Flutter daemon describes a web editor connecting to local port 43070. Its
  final caveat limits implemented support to web-server and explicitly excludes
  debugging/device mirroring, despite broader aspirational bullets above it.
• The marketing page advertises plugins, code style and AST customization and
  multiple frameworks. These claims are archived without independently proving
  the old implementation or promising their return in a future subcommand.
• The main CLI guide's history follows back to 2022-08-08; the daemon guide was
  added 2022-08-12. Both moved into the root docs tree in December 2023. The
  marketing page first appears in this path's history in March 2025.

Historical implementation pointers carried by the pages:

• Framework configuration in gridaco/code
• Flutter daemon integration PR #174
• Flutter daemon browser client (original unpinned cross-repository pointer)
• Original Korean product listing

Original visual assets

CLI introduction banner source

Marketing design input source

Marketing code output source

English CLI guide — full original Markdown

Immutable source · Raw source

The fenced transcript preserves the original relative links. Use the pinned
source to resolve them in their original directory.

---
id: cli
title: "CLI"
---

# CLI

![introducing grida cli - a cli for your figma design](./assets/supercharged-with-cli.png)

Grida CLI is a package manager for design, that enables you to add designs like a module to use directly from your code. In advance, you can use Grida CLI to create a CI/CD pipeline for your design-production workflow.

## Install CLI

```
npm i -g grida
```

> Note: It is recommended to install Griad CLI inside a project (instead of globally) - `yarn add --dev grida` or `npm i --save-dev grida`.

## `grida init`

Fisrt, you need to initialize your project with `grida init`.
grida init works for both empty project and for existing project.

If you don't have a existing node project (react, rn, svelte, ...) (with package.json) or dart/flutter project (with pubspec.yaml), grida will prompt you to create a new project.

**Starting from scratch (no existing project)**

You'll get the message below if you run grida init under empty directory with no project root.

```

\$ grida init

> No project root is found (package.json or pubspec.yml) with framework configuration. Do you want to continue without creating a project? (y/N)

```

- No (default) - grida will walk you through to create a new base project.
- Yes - grida ignores the base project and continues with the initialization. (this make break the configuration afterwards. not recommanded)

### 1. Design source configuration

Once init is complete, you'll be prompted to configure the design source like below.

```
> Where from to import your design? : figma
> Please enter your figma file url : https://www.figma.com/file/xxx
> Please enter your figma personal access token.: ******************
```

- origin : The provider of your design (figma, sketch, ...)
- file : The unique identifier or file path to your design.
- token (for figma) : A [personal-access-token](../with-figma/guides/how-to-get-personal-access-token) for grida cli to read your design (readonly).

### 2. Framework configuration

Once the design source configuration is complete, you'll be prompt to configure settings for your framework.
The promps & specs vary by frameworks, you can see each configurations at [`@grida/builder-config`](https://github.com/gridaco/code/tree/main/packages/builder-config).

You may follow the cli prompts to configure your project. You can edit this manually in grida.config.js once the init process is complete.

**React example of framework config**

```js
/**
 * @type {import('@grida/builder-config').FrameworkConfig}
 */
const frameworkConfig = {
  framework: "react",
  language: "tsx",
  component_declaration_style: {
    exporting_style: {
      type: "export-named-functional-component",
      declaration_syntax_choice: "function",
      exporting_position: "with-declaration",
    },
  },
};
```

### Project structure

Once project setup is complete, you'll see you project tree organized like below.

**For example, NextJS**

```
...
├── .grida             (created)
├── .env               (modified)
├── .gitignore         (modified)
├── README.md
├── grida              (created)
│   └── .gitkeep       (created)
├── grida.config.js    (created)
├── next-env.d.ts
├── package.json       (modified)
├── pages
│   ├── _app.tsx
│   └── index.tsx
├── public
├── styles
├── tsconfig.json
└── ...
```

**For example, Flutter**

```
...
├── .grida                   (created)
├── .env                     (modified)
├── .gitignore               (modified)
├── README.md
├── analysis_options.yaml
├── build
├── flutter_app.iml
├── grida.config.js
├── lib
│   ├── grida                (created)
│   │   └── .gitkeep
│   └── main.dart
├── pubspec.lock
├── pubspec.yaml
├── test
│   └── widget_test.dart
├── web
├── macos
├── ios
├── landroid
├── linux
├── windows
└── ...
```

## `grida add`

grida works like a package manager that you might already be familiar with. The syntax is,

```
grida add [modules...]
# use project configuration
grida add
# add specific design module
grida add <modules...>
```

**Running `grida add` without arguments**

Running `grida add` without any arguments will prompt you to select a design module to add. This is automatically managed by grida cli. but this is not recommended since idendifying your design with its name may cause human errors.

**Adding package**

> `grida add <module>`

**Adding package with figma url**

You can import target design with, `grida add <figma-url>`.

> If the givven figma url points to entire file or a page, You might be importing tons of modules at one time. It is recommended to use frame-level url instead.

```bash
$ grida add https://www.figma.com/file/x7RRK6RwWtZuNakmbMLTVH/examples?node-id=2422%3A10181

# or you can add with id only (the target should be a node that is inside the file you have in grida.config.js)

$ grida add 2422:10181
```

The added package will be added to `/grida` or `/lib/grida` (for flutter) by default, unless you have additional configuration.

You are now good to go with your main working file, and import the added module.

So for example (react), In your `pages/index.tsx`, you may import like..

```tsx
import { NewModuleFromFigma } from "../grida/new-module-from-figma";

export default function () {
  return (
    <>
      {/* ... */}
      <NewModuleFromFigma />
      {/* ... */}
    </>
  );
}
```

## See also

- [(ko) Grida CLI @ disquiet.io](https://disquiet.io/product/figma-cli-by-grida)

English Flutter daemon guide — full original Markdown

Immutable source · Raw source

The fenced transcript preserves the original relative links. Use the pinned
source to resolve them in their original directory.

# `grida flutter daemon`

Starts a local flutter daemon server for grida web editor.
With local daemon you can preview your flutter designs with no delay with hot reload.

To start,

```bash
grida flutter daemon
```

To kill, `ctrl+c`.

## Editor

Once the daemon is running (default port 43070) the Grida web editor, for instance, code.grida.co will automatically use your local daemon server for building flutter apps.

> You do not want to use other port than 43070 unless you're building your own client with [`@flutter-daemon/client`](https://github.com/gridaco/flutter-builder/tree/main/packages/flutter-daemon-client)

## Do I need to run this command?

It is recommended to run your own local daemon server for below reasons.

- Much more faster (10x faster in general) - You might have tried [dartpad.dev](https://dartpad.dev) and you know how slow it is to render.
- Running flutter locally enables you to debug your flutter app.
- Platform agnostic - this allows you to run flutter app other than web - (e.g. android, ios, mac, win, linux etc)

> Yet we only support web-server for now. which means debugging and device mirroring is not supported at this moment.

## See also

- https://github.com/gridaco/code/pull/174

Korean CLI guide — full original Markdown

Immutable source · Raw source

The fenced transcript preserves the original relative links. Use the pinned
source to resolve them in their original directory.

---
id: cli
title: "CLI"
locale: ko
---

# CLI

<!-- ![introducing grida cli - a cli for your figma design](../../assets/supercharged-with-cli.png) -->

Grida CLI 는 디자인을 마치 모듈처럼 관리할수 있도록 도와주는 일종의 패키지 매니저 입니다. 간단히는 디자인 모듈을 임포트하여 프로젝트에 사용하거나, 응용으로는 디자인을 바탕으로 CI/CD 파이프라인을 구축할수도 있습니다.

## CLI 설치하기

```
npm i -g grida
```

> 노트: 프로젝트별로 grida 를 설치하는것이 권장됩니다. (글로벌 설치 대신) - `yarn add --dev grida` 또는 `npm i --save-dev grida`.

## `grida init`

우선 `grida init` 를 사용하여 프로젝트를 셋업해야 합니다.
grida init 은 기존에 있는 node (react, rn, svelte, ...) (with package.json) 또는 dart/flutter (with pubspec.yaml) 에서 실행 가능하며 빈 디렉토리어세 실행할경우 grida 가 새로운 프론트엔드 프로젝트를 우선 셋업하게 됩니다.

**기존 프로젝트가 없을경우**

기존 프로젝트가 없을 경우, 아래와 같은 메세지가 나옵니다.

```
$ grida init
> No project root is found (package.json or pubspec.yml) with framework configuration. Do you want to continue without creating a project? (y/N)
```

- No (default) - grida 가 우선 베이스 프로젝트를 셋업할수 있도록 가이드 합니다.
- Yes - 베이스 프로젝트 없이 셋업을 계속합니다. 이는 이후 configuration 이 망가질수 있음으로 추천하지 않습니다. 먼저 베이스 프로젝트 (기존 프로젝트) 를 생성해주세요.

### 1. 디자인 소스 설정

신규프로젝트 또는 기존프로젝트에 `grida init` 을 완료 하였다면 자동으로 디자인 소스를 설정하는 프롬프트가 아래와 같이 표시됩니다.

```
> Where from to import your design? : figma
> Please enter your figma file url : https://www.figma.com/file/xxx
> Please enter your figma personal access token.: ******************
```

- origin : 디자인 소스를 어디서 가져올지 선택합니다. (figma, sketch, ...)
- file : 파일을 선택합니다.
- token : 파일에 접근할수 있는 [personal-access-token](../../with-figma/guides/how-to-get-personal-access-token) 을 발급받아 입력합니다.

### 2. 프레임워크 설정

디자인 소스 설정 완료후, 프레임워크 설정을 위해 grida 가 몇가지 질문을 합니다.
이는 각 프레임워크 별로 다르며, 자세한 스펙은 [`@grida/builder-config`](https://github.com/gridaco/code/tree/main/packages/builder-config) 에서 확인할수 있습니다.

cli 의 안내를 따라주시면 되며, 이후 니즈에 따라 grida.config.js 에서 아래 영역을 수동을 수정할수 있습니다.

**React 의 예시**

```js
/**
 * @type {import('@grida/builder-config').FrameworkConfig}
 */
const frameworkConfig = {
  framework: "react",
  language: "tsx",
  component_declaration_style: {
    exporting_style: {
      type: "export-named-functional-component",
      declaration_syntax_choice: "function",
      exporting_position: "with-declaration",
    },
  },
};
```

### 프로젝트 구조

grida init 을 통해 정상적으로 프로젝트가 셋업 되었다면 아래와 같이 디렉토리가 설정됩니다.

**For example, NextJS**

```
...
├── .grida             (created)
├── .env               (modified)
├── .gitignore         (modified)
├── README.md
├── grida              (created)
│   └── .gitkeep       (created)
├── grida.config.js    (created)
├── next-env.d.ts
├── package.json       (modified)
├── pages
│   ├── _app.tsx
│   └── index.tsx
├── public
├── styles
├── tsconfig.json
└── ...
```

**For example, Flutter**

```
...
├── .grida                   (created)
├── .env                     (modified)
├── .gitignore               (modified)
├── README.md
├── analysis_options.yaml
├── build
├── flutter_app.iml
├── grida.config.js
├── lib
│   ├── grida                (created)
│   │   └── .gitkeep
│   └── main.dart
├── pubspec.lock
├── pubspec.yaml
├── test
│   └── widget_test.dart
├── web
├── macos
├── ios
├── landroid
├── linux
├── windows
└── ...
```

## `grida add`

grida add 는 패키지 매니저와 비슷하게 작동합니다. `grida add [modules...]` 의 형식으로 사용합니다.

```
grida add [modules...]
# use project configuration
grida add
# add specific design module
grida add <modules...>
```

**아무 arguments 없이 `grida add` 사용하기**

아무 arguments 없이 `grida add` 를 실행할경우, 어떤 모듈을 더할지 cli 에서 자동으로 관리해 줍니다. 하지만 이는 디자인의 이름으로 선택해야 하기때문에 예상과 다른 디자인을 임포트하는 실수를 유발하기 쉽습니다. `grida add` 에 타겟 모듈을 명시하여 사용하는것을 추천드립니다.

**Adding package**

> `grida add <module>`

**Adding package with figma url**

`grida add <figma-url>` 의 형태로 아래와 같이 사용할수 있습니다.

> 만약 figma url 이 파일 전채나, 페이지를 가르킬 경우, 많은 모듈이 한번에 임포트 되수 있기에 프레임 단위의 url 을 사용하는것을 추천드립니다.

```bash
$ grida add https://www.figma.com/file/x7RRK6RwWtZuNakmbMLTVH/examples?node-id=2422%3A10181

# or you can add with id only (the target should be a node that is inside the file you have in grida.config.js)

$ grida add 2422:10181
```

추가된 페키지는 기본설정에 따라 `/grida` 또는 `/lib/grida` (flutter) 에 추가 됩니다. (grida.config.js 에 추가 설정이 없을경우)

이제, 작업중인 메인 파일에 돌아가, 모듈을 임포트 할수 있습니다.

예시로 (react), `pages/index.tsx` 에서, 아래와 같이 사용될수 있습니다.

```tsx
import { NewModuleFromFigma } from "../grida/new-module-from-figma";

export default function () {
  return (
    <>
      {/* ... */}
      <NewModuleFromFigma />
      {/* ... */}
    </>
  );
}
```

## See also

- [Grida CLI @ disquiet.io](https://disquiet.io/product/figma-cli-by-grida)

Korean Flutter daemon guide — full original Markdown

Immutable source · Raw source

The fenced transcript preserves the original relative links. Use the pinned
source to resolve them in their original directory.

# `grida flutter daemon`

로컬에서 웹 에디터를 위해 flutter daemon 인스턴스를 실행시킵니다.
로컬 데몬을 사용하면 핫리로딩이 활성화 되며, 리모트 서버를 거치지 않고, 지연 없이 앱 빌드가 가능합니다.

시작하려면,

```bash
grida flutter daemon
```

종료하려면, `ctrl+c`.

## 에디터

데몬이 실행되면 (기본 포트 43070) 웹 에디터, 예를 들어서 code.grida.co 를 사용할 수 있습니다. grida 웹 에디터는 자동으로 로컬에서 실행되는 데몬 서버에 접근합니다.

> 포트를 변경하지 마십시오. [`@flutter-daemon/client`](https://github.com/gridaco/flutter-builder/tree/main/packages/flutter-daemon-client) 를 사용하여 자신만의 클라이언트를 구축하는것이 아니라면, 포트를 수정하지 마세요.

## 이 명령어를 실행해야 하나요?

아래 이유에서 로컬 데몬서버를 실행하는것이 권장됩니다. (로컬 머신의 성능이 아주 나쁘지 않을경우)

- 훨신 빠릅니다. (일반적으로 10배 빠릅니다) - [dartpad.dev](https://dartpad.dev) 를 사용해보셨다면 얼마나 렌더까지 오래걸리는지 아실수 있습니다. 데몬은 로컬에서 실행되고 핫리로딩이 지원됨으로 훨신 빠른 개발이 가능합니다.
- 로컬 데몬을 실행시킬경우 디버깅이 가능해 집니다.
- 모든 플랫폼 빌드 가능 - 웹 이외의 환경에서 앱을 실행시키는것이 가능해집니다. - (예. android, ios, mac, win, linux etc)

> 준비중: 아직 web-server 만 지원하기에, 디버깅과 디바이스 미러링은 지원되고 있지 않습니다.

## 같이 보기

- https://github.com/gridaco/code/pull/174

/figma/ci — complete page-specific visible copy

Immutable page implementation

The following transcribes the page-specific content, including its terminal
animation. The shared site header/footer and animation implementation are not
product claims; the full source is also preserved below.

Grida CLI // Beta

CI your design.

Grida CLI generates code from Design input and saves it directly into your workspace. Use your design like a package.

Buttons: npx grida init (changes to “Copied to clipboard”); “Start Coding” (linked to https://grida.co/docs/cli).

One command to add designs as a module to your existing projects.

Both illustrations use the alt text “Figma to Code Demo”; originals are embedded above.

grida add https://www.figma.com/file/x7RRK6RwWtZuNakmbMLTVH/?node-id=906%3A779

Be the Maestro.

You can import your design like a well-coded library, with full documentations.
We play the details // you play the orchestra.

The terminal title is ~/projects/my-react-app -- zsh, with a “replay” button.
Its complete animated transcript is:

➜ ~/ grida add https://www.figma.com/file/x7RRK6RwWtZuNakmbMLTVH/?node-id=906%3A779
➜ ~/ Fetching desing...
➜ ~/ Generating code
➜ ~/ Fetching assets..
➜ ~/ Module added to ./src/grida/home.tsx
➜ ~/ To use this module, import..

     ```
     import React from "react";
     import { Home } from "./grida/home";
     ```

➜ ~/

Fits into your configuration.

Configure grida with grida.config.js. You can define plugins, output code styles and customize the behavior deep down to AST level.

• secure, runs locally
• zero dependency by default
• works with svelte
• works with solid-js
• works with vanilla html/css
• works with react & react-native
• works with flutter

“Read the docs” linked to https://grida.co/docs/cli.

CI your design.

Closing buttons: “Start Coding” (same docs URL), npx grida init (changes to “Copied to clipboard”).

This page was made with grida CLI under 7 minutes with NextJS & @emotion/styled

Marketing metadata wrapper — full original source

Immutable source

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Figma CI | Automate Your Design Workflow",
  description: "Continuous integration for Figma projects powered by Grida.",
};

export { default } from "./_page";

Marketing page implementation — full original source

Immutable source

"use client";

import { motion } from "motion/react";
import { RefreshCw } from "lucide-react";
import Header from "@/www/header";
import Footer from "@/www/footer";
import Image from "next/image";
import React, { useState, useEffect, useRef } from "react";
import { Button } from "@app/ui/components/button";
import { Card } from "@app/ui/components/card";
import { CheckIcon } from "lucide-react";

export default function CiPage() {
  return (
    <main className="">
      <Header />
      <Hero />
      <Demo1 />
      <Demo2 />
      <Demo3 />
      <div className="min-h-screen" />
      <Footer />
    </main>
  );
}

function Hero() {
  const [copied, setCopied] = useState(false);
  return (
    <section className="relative min-h-screen flex flex-col items-center justify-center text-center p-4 md:p-8">
      <span className="px-3 py-1 text-xs font-mono text-white bg-black">
        _Grida CLI // Beta_
      </span>
      <h1 className="text-6xl font-bold mt-12">CI your design.</h1>
      <p className="text-gray-500 max-w-lg mt-12">
        Grida CLI generates code from Design input and saves it directly into
        your workspace. Use your design like a package.
      </p>

      <div className="flex gap-4 mt-12">
        <Button
          variant="outline"
          onClick={() => {
            navigator.clipboard.writeText("npx grida init");
            setCopied(true);
            setTimeout(() => setCopied(false), 1000);
          }}
        >
          {copied ? "Copied to clipboard" : "npx grida init"}
        </Button>
        <a href="https://grida.co/docs/cli">
          <Button variant="default">Start Coding</Button>
        </a>
      </div>
    </section>
  );
}

function Demo1() {
  return (
    <section className="relative min-h-screen flex flex-col items-center justify-center text-center bg-gradient-to-b from-black to-slate-800 text-white p-8">
      <h2 className="text-4xl font-bold max-w-2xl">
        One command to add designs as a module to your existing projects.
      </h2>
      <div className="flex flex-col gap-6 items-center">
        <div className="relative mt-12">
          <Image
            src="/www/.figma/ci/top-design.png"
            alt="Figma to Code Demo"
            width={320}
            height={180}
            className="w-40"
          />
        </div>
        <div className="flex items-center gap-2 bg-white rounded-xl shadow-lg px-4 py-3 font-mono max-w-full">
          <span className=" text-muted-foreground">→</span>
          <span className="font-bold text-xs text-black whitespace-nowrap">
            grida add
          </span>
          <div className="overflow-x-auto max-w-[300px] no-scrollbar">
            <span className="text-gray-600 text-xs  whitespace-nowrap block ">
              https://www.figma.com/file/x7RRK6RwWtZuNakmbMLTVH/?node-id=906%3A779
            </span>
          </div>
        </div>
        <div className="relative">
          <Image
            src="/www/.figma/ci/bottom-code.png"
            alt="Figma to Code Demo"
            width={320}
            height={180}
            className="w-40"
          />
        </div>
      </div>
      <h3 className="text-xl font-semibold mt-12">Be the Maestro.</h3>
      <p className=" text-muted-foreground max-w-lg mt-4">
        You can import your design like a well-coded library, with full
        documentations. <br />
        We play the details // you play the orchestra.
      </p>

      <div className="absolute bottom-8">
        <span className="text-white text-2xl">↓</span>
      </div>
    </section>
  );
}

function Demo2() {
  return (
    <section className="flex flex-col gap-12 bg-gray-50 py-40 ">
      <TerminalAnimation />
    </section>
  );
}

function Demo3() {
  const [copied, setCopied] = useState(false);
  return (
    <section className="relative min-h-screen items-center flex flex-col justify-center px-8 py-20 bg-black text-white">
      <div className="max-w-3xl">
        <h2 className="text-4xl font-bold">Fits into your configuration.</h2>
        <p className=" opacity-50 mt-6">
          Configure grida with{" "}
          <span className="font-mono">grida.config.js</span>. You can define
          plugins, output code styles and customize the behavior deep down to
          AST level.
        </p>
        <ul className="mt-12 space-y-3 text-lg">
          <li className="flex items-center gap-2">
            <CheckIcon size={16} /> secure, runs locally
          </li>
          <li className="flex items-center gap-2">
            <CheckIcon size={16} /> zero dependency by default
          </li>
          <li className="flex items-center gap-2">
            <CheckIcon size={16} /> works with svelte
          </li>
          <li className="flex items-center gap-2">
            <CheckIcon size={16} /> works with solid-js
          </li>
          <li className="flex items-center gap-2">
            <CheckIcon size={16} /> works with vanilla html/css
          </li>
          <li className="flex items-center gap-2">
            <CheckIcon size={16} /> works with react & react-native
          </li>
          <li className="flex items-center gap-2">
            <CheckIcon size={16} /> works with flutter
          </li>
        </ul>

        <a
          href="https://grida.co/docs/cli"
          className="mt-12 inline-block text-lg font-semibold underline"
        >
          Read the docs
        </a>
      </div>

      <div className="absolute lg:w-[1000px] sm:w-[600px] w-[400px] bottom-[-400px] left-1/2 transform -translate-x-1/2">
        <Card className="px-20 md:px-40 py-24 flex flex-col gap-20 shadow-lg bg-white dark:bg-neutral-800 text-black border-gray-200 dark:border-neutral-700">
          <h3 className="dark:text-white text-3xl md:text-5xl font-semibold text-center">
            CI your design.
          </h3>
          <div className="flex gap-4 mt-4 items-center justify-center">
            <a href="https://grida.co/docs/cli">
              <Button variant="default">Start Coding</Button>
            </a>
            <Button
              variant="outline"
              onClick={() => {
                navigator.clipboard.writeText("npx grida init");
                setCopied(true);
                setTimeout(() => setCopied(false), 1000);
              }}
            >
              {copied ? "Copied to clipboard" : "npx grida init"}
            </Button>
          </div>
        </Card>
        <h4 className="text-center text-muted-foreground mt-24 font-mono">
          This page was made with grida CLI under 7 minutes with NextJS &
          @emotion/styled
        </h4>
      </div>
    </section>
  );
}

const terminalText = `➜ ~/ grida add https://www.figma.com/file/x7RRK6RwWtZuNakmbMLTVH/?node-id=906%3A779
➜ ~/ Fetching desing...
➜ ~/ Generating code
➜ ~/ Fetching assets..
➜ ~/ Module added to ./src/grida/home.tsx
➜ ~/ To use this module, import..

     \`\`\`
     import React from "react";
     import { Home } from "./grida/home";
     \`\`\`

➜ ~/`;

function TerminalAnimation() {
  const [displayedText, setDisplayedText] = useState("");
  const [isComplete, setIsComplete] = useState(false);
  const [isAnimating, setIsAnimating] = useState(false);
  const [key, setKey] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);
  const observerRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  // Function to handle the typing animation
  useEffect(() => {
    if (!isAnimating) return;

    let currentIndex = 0;
    const textLength = terminalText.length;

    const typingInterval = setInterval(() => {
      if (currentIndex < textLength) {
        setDisplayedText(terminalText.slice(0, currentIndex + 1));
        currentIndex++;
      } else {
        clearInterval(typingInterval);
        setIsComplete(true);
      }
    }, 30); // Adjust typing speed here

    return () => clearInterval(typingInterval);
  }, [isAnimating, key]);

  // Reset animation function
  const handleReplay = () => {
    setDisplayedText("");
    setIsComplete(false);
    setKey((prev) => prev + 1);
    setIsAnimating(true);
  };

  // Function to apply syntax highlighting
  const formatWithSyntaxHighlighting = (text: string) => {
    // Split the text into lines for processing
    const lines = text.split("\n");

    return lines
      .map((line, lineIndex) => {
        // Handle command lines with arrows
        if (line.startsWith("➜ ~/")) {
          // Special case for the line with node-id
          if (line.includes("node-id=")) {
            const parts = line.split("node-id=");
            return (
              <span key={lineIndex}>
                <span className="text-gray-700">➜ ~/ </span>
                {parts[0].substring(5)}
                <span className="text-teal-500">node-id={parts[1]}</span>
              </span>
            );
          }
          return (
            <span key={lineIndex}>
              <span className="text-gray-700">➜ ~/ </span>
              <span>{line.substring(5)}</span>
            </span>
          );
        }

        // Handle import statements
        if (line.includes("import")) {
          // Match the import React from "react" pattern
          if (line.includes("import React from")) {
            return (
              <span key={lineIndex}>
                <span>import </span>
                <span className="text-teal-500">React</span>
                <span> </span>
                <span className="text-cyan-500">from</span>
                <span> </span>
                <span className="text-teal-500">&quot;react&quot;</span>
                <span>;</span>
              </span>
            );
          }

          // Match the import { Home } from "./grida/home" pattern
          if (line.includes("import { Home }")) {
            return (
              <span key={lineIndex}>
                <span>import &#123; </span>
                <span className="text-teal-500">Home</span>
                <span> &#125; </span>
                <span className="text-cyan-500">from</span>
                <span> </span>
                <span className="text-teal-500">&quot;./grida/home&quot;</span>
                <span>;</span>
              </span>
            );
          }
        }

        // Return other lines unchanged
        return <span key={lineIndex}>{line}</span>;
      })
      .reduce((acc: React.ReactNode[], element, index) => {
        return [...acc, element, <br key={`br-${index}`} />];
      }, [])
      .slice(0, -1); // Remove the last <br/>
  };

  // Create a non-animated version of the full text with syntax highlighting
  const fullFormattedText = formatWithSyntaxHighlighting(terminalText);
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsAnimating(true);
          observer.disconnect();
        }
      },
      { threshold: 0.3 }
    );

    if (observerRef.current) {
      observer.observe(observerRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div
      ref={observerRef}
      className="flex flex-col items-center justify-center min-h-[500px] p-4 md:p-8"
    >
      <div
        ref={containerRef}
        className="w-full max-w-3xl bg-white rounded-lg overflow-hidden shadow-xl border border-gray-200"
      >
        {/* Terminal header */}
        <div className="flex items-center px-4 py-2 bg-gray-100 border-b-gray-200">
          <div className="flex space-x-2">
            <div className="size-4 rounded-full border border-neutral-200 bg-red-400"></div>
            <div className="size-4 rounded-full border border-neutral-200 bg-yellow-400"></div>
            <div className="size-4 rounded-full border border-neutral-200 bg-green-400"></div>
          </div>
          <div className="mx-auto text-sm text-gray-500">
            ~/projects/my-react-app -- zsh
          </div>
        </div>

        {/* Terminal content */}
        <div
          ref={contentRef}
          className="p-4 h-[300px] overflow-auto font-mono text-sm bg-white relative"
        >
          {/* Invisible full formatted text to maintain width and structure */}
          <div className="whitespace-pre-wrap invisible absolute">
            {fullFormattedText}
          </div>

          {/* Visible animated text with syntax highlighting */}
          <div className="whitespace-pre-wrap text-gray-500">
            {isAnimating && displayedText
              ? formatWithSyntaxHighlighting(displayedText)
              : null}
            {!isComplete && isAnimating && (
              <motion.span
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ repeat: Number.POSITIVE_INFINITY, duration: 0.2 }}
                className="inline-block w-2 h-4 ml-1 bg-gray-800"
              />
            )}
          </div>
        </div>
      </div>

      <Button
        onClick={handleReplay}
        variant="outline"
        className="mt-6 flex items-center gap-2 px-4 py-2 transition-all duration-300 border border-gray-200 rounded-full bg-white text-black"
      >
        <RefreshCw className="size-4" />
        <span>replay</span>
      </Button>
    </div>
  );
}

Original translation registration — full original source

Immutable source

{
  "translations": ["ko"]
}