First Steps with KnowCode

2. Getting Started

This section will guide you through setting up KnowCode and generating your first application. Whether you’re a designer uploading a Figma screenshot or a developer integrating our SDK, the process is designed to be fast, intuitive, and accessible.

---

2.1 Prerequisites

Before you begin, ensure you have:

• A crypto wallet (MetaMask, Coinbase Wallet, or any Base-compatible option).

• A design file or screenshot (e.g., Figma, Sketch, Adobe XD).

• Basic familiarity with dApp workflows (optional for developers).

---

2.2 Quick Start (No Code)

1. Connect Wallet

   • Visit knowcode.base and connect your wallet.

   • Supported wallets: MetaMask, Coinbase, WalletConnect.

2. Upload Design

   • Drag & drop a Figma screenshot or paste a design URL.

   • Our AI scans layout, colors, typography, and interactions.

3. Generate Code

   • Select a target framework (React, Tailwind, or HTML/CSS).

   • Code is generated in under 10 seconds.

4. Preview & Deploy

   • Instantly preview your app in the dashboard.

   • Register a domain and deploy on Base with sub-cent gas fees.

✅ That’s it — your app is live, end-to-end, without manual coding.

---

2.3 Quick Start (Developer SDK)

For developers who want programmatic access, install the SDK:

Node.js (npm):

npm install @knowcode/sdk

Usage Example (JavaScript):

const KnowCodeSDK = require('@knowcode/sdk');
const sdk = new KnowCodeSDK({ apiKey: 'your-api-key' });

async function generateCode(designUrl) {
  const code = await sdk.generateFromDesign(designUrl, { framework: 'react' });
  console.log(code);
}

generateCode('https://your-figma-screenshot.url');

• Supports React, Tailwind, HTML/CSS.

• Options for responsive layouts and WCAG accessibility.

---

2.4 Next Steps

• Explore advanced features in Core Features (Section 3).

• Review API Reference (Section 5) for CI/CD integrations.

• Learn to build custom plugins in Plugins & Extensions (Section 6).