Aipixelperfect Design Generator

AI-powered image generation platform for professional design creation with prompt-based synthesis and real-time collaboration

aradotso b9357fb 23.6 KB Updated Sep 17, 2026

Install

Press C to copy

$ npx skillmds@latest add aradotso/aipixelperfect-design-generator

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download SKILL.md

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/aradotso/aipixelperfect-design-generator.svg)](https://skillmd.com/skills/aradotso/aipixelperfect-design-generator)

Trust & safety

Audits pending

Not yet audited · commit b9357fb

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

AiPixelPerfect Design Generator

Skill by ara.so — Design Skills collection.

AiPixelPerfect is an AI-powered design synthesis engine that generates professional-quality images from text prompts. It features a responsive web interface, multilingual support, real-time collaboration tools, and export integrations with popular design platforms like Figma, Adobe Creative Cloud, and Canva.

Installation

Web Interface Access

Navigate to the hosted platform:

# Open the web interface
open https://abnormal-codex.github.io/Ai-Pixel-Design-Archive/

Create an account and authenticate via the UI

Local Development Setup

# Clone the repository
git clone https://github.com/abnormal-codex/Ai-Pixel-Design-Archive.git
cd Ai-Pixel-Design-Archive

# Install dependencies (Next.js based)
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your configuration

Environment Configuration

# .env.local
NEXT_PUBLIC_API_ENDPOINT=https://api.aipixelperfect.com
NEURAL_BACKEND_URL=https://synthesis.aipixelperfect.com
WEBSOCKET_SERVER=wss://collab.aipixelperfect.com
API_KEY=${AIPIXELPERFECT_API_KEY}
MAX_RESOLUTION=8192
DEFAULT_VARIATIONS=4

Core Concepts

Design Synthesis Workflow

Prompt Input → Descriptive text of desired image
Synthesis → Neural engine generates 4 variations
Selection → Choose best matching variation
Refinement → Adjust parameters with sliders
Export → Download or push to design tools

Supported Output Formats

Raster images: PNG, JPEG, WebP
Resolutions: 512px to 8K (8192px)
Color spaces: sRGB, Display P3
Transparency: Alpha channel support

Web Interface Usage

Basic HTML Integration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AiPixelPerfect Design Generator</title>
    <link rel="stylesheet" href="styles/aipixel.css">
</head>
<body>
    <div id="synthesis-canvas">
        <div class="prompt-container">
            <textarea 
                id="design-prompt" 
                placeholder="Describe your design vision..."
                rows="3"
            ></textarea>
            <button id="synthesize-btn"
                Synthesize
            </button>
        </div>
        
        <div id="variations-grid" class="hidden">
            <!-- Generated variations appear here -->
        </div>
        
        <div id="refinement-panel" class="hidden">
            <label>Brightness: 
                <input type="range" id="brightness" min="0" max="200" value="100">
            </label>
            <label>Contrast: 
                <input type="range" id="contrast" min="0" max="200" value="100">
            </label>
            <label>Saturation: 
                <input type="range" id="saturation" min="0" max="200" value="100">
            </label>
            <label>Style Weight: 
                <input type="range" id="style-weight" min="0" max="100" value="50">
            </label>
            <button Changes</button>
        </div>
    </div>
    
    <script src="scripts/aipixel-core.js"></script>
</body>
</html>

JavaScript Core Functions

// scripts/aipixel-core.js

const AiPixelPerfect = {
    apiEndpoint: process.env.NEXT_PUBLIC_API_ENDPOINT,
    currentDesign: null,
    
    // Generate design from prompt
    async generateDesign(prompt, options = {}) {
        const response = await fetch(`${this.apiEndpoint}/synthesize`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                prompt: prompt,
                variations: options.variations || 4,
                resolution: options.resolution || 2048,
                style_weight: options.styleWeight || 0.5,
                language: options.language || 'en'
            })
        });
        
        if (!response.ok) {
            throw new Error(`Synthesis failed: ${response.statusText}`);
        }
        
        const data = await response.json();
        return data.variations;
    },
    
    // Refine selected design
    async refineDesign(designId, adjustments) {
        const response = await fetch(`${this.apiEndpoint}/refine/${designId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                brightness: adjustments.brightness,
                contrast: adjustments.contrast,
                saturation: adjustments.saturation,
                style_weight: adjustments.styleWeight
            })
        });
        
        return await response.json();
    },
    
    // Export to external platform
    async exportDesign(designId, platform, options = {}) {
        const response = await fetch(`${this.apiEndpoint}/export/${designId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                platform: platform, // 'figma', 'adobe', 'canva'
                format: options.format || 'png',
                maintain_layers: options.maintainLayers || false,
                target_project: options.targetProject || null
            })
        });
        
        return await response.json();
    }
};

// Example usage in UI
async function generateDesign() {
    const prompt = document.getElementById('design-prompt').value;
    const variationsGrid = document.getElementById('variations-grid');
    
    try {
        const variations = await AiPixelPerfect.generateDesign(prompt, {
            variations: 4,
            resolution: 2048
        });
        
        variationsGrid.innerHTML = '';
        variations.forEach((variation, index) => {
            const img = document.createElement('img');
            img.src = variation.url;
            img.alt = `Variation ${index + 1}`;
            img.onclick = () => selectVariation(variation.id);
            variationsGrid.appendChild(img);
        });
        
        variationsGrid.classList.remove('hidden');
    } catch (error) {
        console.error('Generation failed:', error);
        alert('Failed to generate design. Please try again.');
    }
}

function selectVariation(variationId) {
    AiPixelPerfect.currentDesign = variationId;
    document.getElementById('refinement-panel').classList.remove('hidden');
}

async function applyRefinements() {
    const adjustments = {
        brightness: document.getElementById('brightness').value / 100,
        contrast: document.getElementById('contrast').value / 100,
        saturation: document.getElementById('saturation').value / 100,
        styleWeight: document.getElementById('style-weight').value / 100
    };
    
    const refined = await AiPixelPerfect.refineDesign(
        AiPixelPerfect.currentDesign,
        adjustments
    );
    
    // Update preview with refined image
    console.log('Refined design:', refined.url);
}

API Integration

RESTful API Client

// api/aipixel-client.js

class AiPixelPerfectClient {
    constructor(apiKey, baseUrl = 'https://api.aipixelperfect.com') {
        this.apiKey = apiKey;
        this.baseUrl = baseUrl;
    }
    
    async request(endpoint, method = 'GET', body = null) {
        const options = {
            method,
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${this.apiKey}`
            }
        };
        
        if (body) {
            options.body = JSON.stringify(body);
        }
        
        const response = await fetch(`${this.baseUrl}${endpoint}`, options);
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.message || 'API request failed');
        }
        
        return await response.json();
    }
    
    // Generate designs from prompt
    async synthesize(prompt, options = {}) {
        return await this.request('/synthesize', 'POST', {
            prompt,
            variations: options.variations || 4,
            resolution: options.resolution || 2048,
            style_weight: options.styleWeight || 0.5,
            language: options.language || 'en',
            seed: options.seed || null
        });
    }
    
    // Get design status
    async getDesignStatus(designId) {
        return await this.request(`/designs/${designId}`);
    }
    
    // Download design
    async downloadDesign(designId, format = 'png') {
        const response = await fetch(
            `${this.baseUrl}/designs/${designId}/download?format=${format}`,
            {
                headers: {
                    'Authorization': `Bearer ${this.apiKey}`
                }
            }
        );
        
        return await response.blob();
    }
    
    // Create custom style
    async createStyle(name, referenceImages, options = {}) {
        const formData = new FormData();
        formData.append('name', name);
        formData.append('description', options.description || '');
        
        referenceImages.forEach((image, index) => {
            formData.append(`reference_${index}`, image);
        });
        
        const response = await fetch(`${this.baseUrl}/styles`, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${this.apiKey}`
            },
            body: formData
        });
        
        return await response.json();
    }
    
    // List available styles
    async listStyles() {
        return await this.request('/styles');
    }
}

// Usage example
const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);

async function generateAndExport() {
    const result = await client.synthesize(
        'minimalist logo for tech startup, blue and white color scheme',
        {
            variations: 4,
            resolution: 4096,
            styleWeight: 0.7
        }
    );
    
    console.log('Generated designs:', result.variations);
    
    // Download the first variation
    const blob = await client.downloadDesign(result.variations[0].id, 'png');
    const url = URL.createObjectURL(blob);
    console.log('Download URL:', url);
}

Collaboration Features

Real-Time Annotation System

// collaboration/annotations.js

class DesignAnnotation {
    constructor(websocketUrl, designId) {
        this.ws = new WebSocket(websocketUrl);
        this.designId = designId;
        this.annotations = [];
        
        this.ws.onmessage = (event) => {
            const data = JSON.parse(event.data);
            this.handleAnnotation(data);
        };
    }
    
    // Add annotation to design
    addAnnotation(x, y, radius, comment, type = 'circle') {
        const annotation = {
            design_id: this.designId,
            type: type,
            position: { x, y },
            radius: radius,
            comment: comment,
            timestamp: Date.now(),
            author: process.env.USER_ID
        };
        
        this.ws.send(JSON.stringify({
            action: 'add_annotation',
            data: annotation
        }));
        
        return annotation;
    }
    
    // Handle incoming annotations
    handleAnnotation(data) {
        if (data.action === 'annotation_added') {
            this.annotations.push(data.annotation);
            this.renderAnnotation(data.annotation);
        }
    }
    
    // Render annotation on canvas
    renderAnnotation(annotation) {
        const canvas = document.getElementById('annotation-canvas');
        const ctx = canvas.getContext('2d');
        
        ctx.beginPath();
        ctx.arc(
            annotation.position.x,
            annotation.position.y,
            annotation.radius,
            0,
            2 * Math.PI
        );
        ctx.strokeStyle = '#ff0000';
        ctx.lineWidth = 2;
        ctx.stroke();
        
        // Add comment tooltip
        const tooltip = document.createElement('div');
        tooltip.className = 'annotation-tooltip';
        tooltip.style.left = `${annotation.position.x}px`;
        tooltip.style.top = `${annotation.position.y - 30}px`;
        tooltip.textContent = annotation.comment;
        document.body.appendChild(tooltip);
    }
    
    // Submit design for review
    async submitForReview(reviewers) {
        const response = await fetch(
            `${process.env.NEXT_PUBLIC_API_ENDPOINT}/reviews/submit`,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${process.env.API_KEY}`
                },
                body: JSON.stringify({
                    design_id: this.designId,
                    reviewers: reviewers,
                    annotations: this.annotations
                })
            }
        );
        
        return await response.json();
    }
}

Common Patterns

Batch Design Generation

async function batchGenerate(prompts, baseOptions = {}) {
    const results = [];
    
    for (const prompt of prompts) {
        try {
            const variations = await AiPixelPerfect.generateDesign(prompt, {
                ...baseOptions,
                variations: 1 // Single variation per prompt for efficiency
            });
            
            results.push({
                prompt: prompt,
                design: variations[0],
                status: 'success'
            });
        } catch (error) {
            results.push({
                prompt: prompt,
                design: null,
                status: 'failed',
                error: error.message
            });
        }
        
        // Rate limiting: wait 1 second between requests
        await new Promise(resolve => setTimeout(resolve, 1000));
    }
    
    return results;
}

// Usage
const prompts = [
    'modern website hero image with gradient background',
    'product photography of smartwatch on wooden table',
    'abstract geometric pattern for textile design'
];

const designs = await batchGenerate(prompts, { resolution: 2048 });

Style Transfer Workflow

async function applyCustomStyle(prompt, styleId, options = {}) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/styled`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                prompt: prompt,
                style_id: styleId,
                style_strength: options.styleStrength || 0.75,
                resolution: options.resolution || 2048,
                preserve_structure: options.preserveStructure || true
            })
        }
    );
    
    return await response.json();
}

// Create and apply custom brand style
async function createBrandStyle(brandName, referenceFiles) {
    const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);
    
    // Create style from brand assets
    const style = await client.createStyle(
        `${brandName}-brand-style`,
        referenceFiles,
        { description: `Official brand style for ${brandName}` }
    );
    
    // Generate designs using the brand style
    const designs = await applyCustomStyle(
        'social media banner for product launch',
        style.id,
        { styleStrength: 0.8 }
    );
    
    return designs;
}

Progressive Refinement

async function progressiveRefine(initialPrompt, iterations = 3) {
    let currentPrompt = initialPrompt;
    let bestDesign = null;
    
    for (let i = 0; i < iterations; i++) {
        const variations = await AiPixelPerfect.generateDesign(currentPrompt, {
            variations: 4,
            seed: i * 1000 // Different seed each iteration
        });
        
        // Simulate selection (in real app, user would choose)
        bestDesign = variations[0];
        
        // Refine prompt based on result
        currentPrompt = await enhancePrompt(currentPrompt, bestDesign);
        
        console.log(`Iteration ${i + 1}: ${currentPrompt}`);
    }
    
    return bestDesign;
}

async function enhancePrompt(originalPrompt, designResult) {
    // Use AI to suggest prompt improvements
    // In practice, this would call a prompt enhancement endpoint
    return `${originalPrompt}, enhanced details, professional quality`;
}

Export Integrations

Figma Export

async function exportToFigma(designId, figmaFileKey, nodeId = null) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/export/${designId}`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({
                platform: 'figma',
                target_file: figmaFileKey,
                target_node: nodeId,
                figma_token: process.env.FIGMA_ACCESS_TOKEN,
                format: 'png',
                scale: 2
            })
        }
    );
    
    const result = await response.json();
    return result.figma_url;
}

Adobe Creative Cloud Export

async function exportToAdobe(designId, adobeProjectId) {
    const blob = await AiPixelPerfect.client.downloadDesign(designId, 'psd');
    
    const formData = new FormData();
    formData.append('file', blob, 'design.psd');
    formData.append('project_id', adobeProjectId);
    
    const response = await fetch(
        'https://api.adobe.io/cc/storage/upload',
        {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${process.env.ADOBE_ACCESS_TOKEN}`,
                'x-api-key': process.env.ADOBE_API_KEY
            },
            body: formData
        }
    );
    
    return await response.json();
}

Troubleshooting

Common Issues

Issue: Synthesis times out after 30 seconds

// Solution: Use async status polling for complex prompts
async function synthesizeWithPolling(prompt, options = {}) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/async`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({ prompt, ...options })
        }
    );
    
    const { job_id } = await response.json();
    
    // Poll for completion
    while (true) {
        const status = await fetch(
            `${process.env.NEXT_PUBLIC_API_ENDPOINT}/jobs/${job_id}`,
            {
                headers: { 'Authorization': `Bearer ${process.env.API_KEY}` }
            }
        );
        
        const data = await status.json();
        
        if (data.status === 'completed') {
            return data.result;
        } else if (data.status === 'failed') {
            throw new Error(data.error);
        }
        
        await new Promise(resolve => setTimeout(resolve, 2000));
    }
}

Issue: Generated designs don't match prompt expectations

// Solution: Use detailed, structured prompts
function buildStructuredPrompt(subject, style, lighting, mood, details = []) {
    return [
        `Subject: ${subject}`,
        `Style: ${style}`,
        `Lighting: ${lighting}`,
        `Mood: ${mood}`,
        details.length > 0 ? `Details: ${details.join(', ')}` : ''
    ].filter(Boolean).join(' | ');
}

const prompt = buildStructuredPrompt(
    'corporate office interior',
    'modern minimalist',
    'natural daylight from large windows',
    'professional and welcoming',
    ['wooden desks', 'ergonomic chairs', 'green plants', 'clean lines']
);

Issue: Copyright conflict warnings on prompt

// Solution: Check prompt before synthesis
async function validatePrompt(prompt) {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_ENDPOINT}/validate/prompt`,
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${process.env.API_KEY}`
            },
            body: JSON.stringify({ prompt })
        }
    );
    
    const result = await response.json();
    
    if (result.conflicts && result.conflicts.length > 0) {
        console.warn('Potential copyright conflicts:', result.conflicts);
        console.log('Suggested alternatives:', result.alternatives);
        return false;
    }
    
    return true;
}

// Use before generation
const isValid = await validatePrompt('logo similar to Nike swoosh');
if (!isValid) {
    console.error('Prompt may infringe on existing IP');
}

Issue: Multilingual prompts not generating culturally appropriate designs

// Solution: Explicitly set language and cultural context
async function generateWithCulturalContext(prompt, language, region) {
    return await AiPixelPerfect.generateDesign(prompt, {
        language: language,
        cultural_context: region, // 'japan', 'latin_america', 'middle_east', etc.
        respect_local_aesthetics: true
    });
}

// Example: Japanese design
const jpDesign = await generateWithCulturalContext(
    '伝統的な日本の庭園',
    'ja',
    'japan'
);

Performance Optimization

Caching Strategy

class DesignCache {
    constructor() {
        this.cache = new Map();
        this.maxSize = 50;
    }
    
    getCacheKey(prompt, options) {
        return `${prompt}-${JSON.stringify(options)}`;
    }
    
    async getCached(prompt, options) {
        const key = this.getCacheKey(prompt, options);
        if (this.cache.has(key)) {
            const cached = this.cache.get(key);
            if (Date.now() - cached.timestamp < 3600000) { // 1 hour
                return cached.data;
            }
        }
        return null;
    }
    
    setCached(prompt, options, data) {
        const key = this.getCacheKey(prompt, options);
        
        if (this.cache.size >= this.maxSize) {
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }
        
        this.cache.set(key, {
            data: data,
            timestamp: Date.now()
        });
    }
}

const designCache = new DesignCache();

async function generateWithCache(prompt, options) {
    const cached = await designCache.getCached(prompt, options);
    if (cached) {
        console.log('Returning cached design');
        return cached;
    }
    
    const result = await AiPixelPerfect.generateDesign(prompt, options);
    designCache.setCached(prompt, options, result);
    return result;
}

Configuration Reference

Resolution Presets

512: Quick preview (draft quality)
1024: Standard web graphics
2048: High-quality prints and presentations
4096: Professional photography replacement
8192: Large format prints and billboards

Style Weight Guidelines

0.0 - 0.3: Subtle style influence, prompt-dominant
0.4 - 0.6: Balanced style and prompt
0.7 - 1.0: Strong style application, may override prompt details

Language Codes

Use ISO 639-1 codes: en, es, fr, de, ja, zh, ar, hi, pt, ru, etc.

---name: aipixelperfect-design-generatordescription: AI-powered image generation platform for professional design creation with prompt-based synthesis and real-time collaboration---# AiPixelPerfect Design Generator> Skill by [ara.so](https://ara.so) — Design Skills collection.AiPixelPerfect is an AI-powered design synthesis engine that generates professional-quality images from text prompts. It features a responsive web interface, multilingual support, real-time collaboration tools, and export integrations with popular design platforms like Figma, Adobe Creative Cloud, and Canva.## Installation### Web Interface Access1. Navigate to the hosted platform:```bash# Open the web interfaceopen https://abnormal-codex.github.io/Ai-Pixel-Design-Archive/```2. Create an account and authenticate via the UI### Local Development Setup```bash# Clone the repositorygit clone https://github.com/abnormal-codex/Ai-Pixel-Design-Archive.gitcd Ai-Pixel-Design-Archive# Install dependencies (Next.js based)npm install# Set up environment variablescp .env.example .env.local# Edit .env.local with your configuration```### Environment Configuration```bash# .env.localNEXT_PUBLIC_API_ENDPOINT=https://api.aipixelperfect.comNEURAL_BACKEND_URL=https://synthesis.aipixelperfect.comWEBSOCKET_SERVER=wss://collab.aipixelperfect.comAPI_KEY=${AIPIXELPERFECT_API_KEY}MAX_RESOLUTION=8192DEFAULT_VARIATIONS=4```## Core Concepts### Design Synthesis Workflow1. **Prompt Input** → Descriptive text of desired image2. **Synthesis** → Neural engine generates 4 variations3. **Selection** → Choose best matching variation4. **Refinement** → Adjust parameters with sliders5. **Export** → Download or push to design tools### Supported Output Formats- Raster images: PNG, JPEG, WebP- Resolutions: 512px to 8K (8192px)- Color spaces: sRGB, Display P3- Transparency: Alpha channel support## Web Interface Usage### Basic HTML Integration```html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AiPixelPerfect Design Generator</title> <link rel="stylesheet" href="styles/aipixel.css"></head><body> <div id="synthesis-canvas"> <div class="prompt-container"> <textarea id="design-prompt" placeholder="Describe your design vision..." rows="3" ></textarea> <button id="synthesize-btn" onclick="generateDesign()"> Synthesize </button> </div> <div id="variations-grid" class="hidden">  </div> <div id="refinement-panel" class="hidden"> <label>Brightness: <input type="range" id="brightness" min="0" max="200" value="100"> </label> <label>Contrast: <input type="range" id="contrast" min="0" max="200" value="100"> </label> <label>Saturation: <input type="range" id="saturation" min="0" max="200" value="100"> </label> <label>Style Weight: <input type="range" id="style-weight" min="0" max="100" value="50"> </label> <button onclick="applyRefinements()">Apply Changes</button> </div> </div> <script src="scripts/aipixel-core.js"></script></body></html>```### JavaScript Core Functions```javascript// scripts/aipixel-core.jsconst AiPixelPerfect = { apiEndpoint: process.env.NEXT_PUBLIC_API_ENDPOINT, currentDesign: null, // Generate design from prompt async generateDesign(prompt, options = {}) { const response = await fetch(`${this.apiEndpoint}/synthesize`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.API_KEY}` }, body: JSON.stringify({ prompt: prompt, variations: options.variations || 4, resolution: options.resolution || 2048, style_weight: options.styleWeight || 0.5, language: options.language || 'en' }) }); if (!response.ok) { throw new Error(`Synthesis failed: ${response.statusText}`); } const data = await response.json(); return data.variations; }, // Refine selected design async refineDesign(designId, adjustments) { const response = await fetch(`${this.apiEndpoint}/refine/${designId}`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.API_KEY}` }, body: JSON.stringify({ brightness: adjustments.brightness, contrast: adjustments.contrast, saturation: adjustments.saturation, style_weight: adjustments.styleWeight }) }); return await response.json(); }, // Export to external platform async exportDesign(designId, platform, options = {}) { const response = await fetch(`${this.apiEndpoint}/export/${designId}`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.API_KEY}` }, body: JSON.stringify({ platform: platform, // 'figma', 'adobe', 'canva' format: options.format || 'png', maintain_layers: options.maintainLayers || false, target_project: options.targetProject || null }) }); return await response.json(); }};// Example usage in UIasync function generateDesign() { const prompt = document.getElementById('design-prompt').value; const variationsGrid = document.getElementById('variations-grid'); try { const variations = await AiPixelPerfect.generateDesign(prompt, { variations: 4, resolution: 2048 }); variationsGrid.innerHTML = ''; variations.forEach((variation, index) => { const img = document.createElement('img'); img.src = variation.url; img.alt = `Variation ${index + 1}`; img.onclick = () => selectVariation(variation.id); variationsGrid.appendChild(img); }); variationsGrid.classList.remove('hidden'); } catch (error) { console.error('Generation failed:', error); alert('Failed to generate design. Please try again.'); }}function selectVariation(variationId) { AiPixelPerfect.currentDesign = variationId; document.getElementById('refinement-panel').classList.remove('hidden');}async function applyRefinements() { const adjustments = { brightness: document.getElementById('brightness').value / 100, contrast: document.getElementById('contrast').value / 100, saturation: document.getElementById('saturation').value / 100, styleWeight: document.getElementById('style-weight').value / 100 }; const refined = await AiPixelPerfect.refineDesign( AiPixelPerfect.currentDesign, adjustments ); // Update preview with refined image console.log('Refined design:', refined.url);}```## API Integration### RESTful API Client```javascript// api/aipixel-client.jsclass AiPixelPerfectClient { constructor(apiKey, baseUrl = 'https://api.aipixelperfect.com') { this.apiKey = apiKey; this.baseUrl = baseUrl; } async request(endpoint, method = 'GET', body = null) { const options = { method, headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${this.apiKey}` } }; if (body) { options.body = JSON.stringify(body); } const response = await fetch(`${this.baseUrl}${endpoint}`, options); if (!response.ok) { const error = await response.json(); throw new Error(error.message || 'API request failed'); } return await response.json(); } // Generate designs from prompt async synthesize(prompt, options = {}) { return await this.request('/synthesize', 'POST', { prompt, variations: options.variations || 4, resolution: options.resolution || 2048, style_weight: options.styleWeight || 0.5, language: options.language || 'en', seed: options.seed || null }); } // Get design status async getDesignStatus(designId) { return await this.request(`/designs/${designId}`); } // Download design async downloadDesign(designId, format = 'png') { const response = await fetch( `${this.baseUrl}/designs/${designId}/download?format=${format}`, { headers: { 'Authorization': `Bearer ${this.apiKey}` } } ); return await response.blob(); } // Create custom style async createStyle(name, referenceImages, options = {}) { const formData = new FormData(); formData.append('name', name); formData.append('description', options.description || ''); referenceImages.forEach((image, index) => { formData.append(`reference_${index}`, image); }); const response = await fetch(`${this.baseUrl}/styles`, { method: 'POST', headers: { 'Authorization': `Bearer ${this.apiKey}` }, body: formData }); return await response.json(); } // List available styles async listStyles() { return await this.request('/styles'); }}// Usage exampleconst client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);async function generateAndExport() { const result = await client.synthesize( 'minimalist logo for tech startup, blue and white color scheme', { variations: 4, resolution: 4096, styleWeight: 0.7 } ); console.log('Generated designs:', result.variations); // Download the first variation const blob = await client.downloadDesign(result.variations[0].id, 'png'); const url = URL.createObjectURL(blob); console.log('Download URL:', url);}```## Collaboration Features### Real-Time Annotation System```javascript// collaboration/annotations.jsclass DesignAnnotation { constructor(websocketUrl, designId) { this.ws = new WebSocket(websocketUrl); this.designId = designId; this.annotations = []; this.ws.onmessage = (event) => { const data = JSON.parse(event.data); this.handleAnnotation(data); }; } // Add annotation to design addAnnotation(x, y, radius, comment, type = 'circle') { const annotation = { design_id: this.designId, type: type, position: { x, y }, radius: radius, comment: comment, timestamp: Date.now(), author: process.env.USER_ID }; this.ws.send(JSON.stringify({ action: 'add_annotation', data: annotation })); return annotation; } // Handle incoming annotations handleAnnotation(data) { if (data.action === 'annotation_added') { this.annotations.push(data.annotation); this.renderAnnotation(data.annotation); } } // Render annotation on canvas renderAnnotation(annotation) { const canvas = document.getElementById('annotation-canvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc( annotation.position.x, annotation.position.y, annotation.radius, 0, 2 * Math.PI ); ctx.strokeStyle = '#ff0000'; ctx.lineWidth = 2; ctx.stroke(); // Add comment tooltip const tooltip = document.createElement('div'); tooltip.className = 'annotation-tooltip'; tooltip.style.left = `${annotation.position.x}px`; tooltip.style.top = `${annotation.position.y - 30}px`; tooltip.textContent = annotation.comment; document.body.appendChild(tooltip); } // Submit design for review async submitForReview(reviewers) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_ENDPOINT}/reviews/submit`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.API_KEY}` }, body: JSON.stringify({ design_id: this.designId, reviewers: reviewers, annotations: this.annotations }) } ); return await response.json(); }}```## Common Patterns### Batch Design Generation```javascriptasync function batchGenerate(prompts, baseOptions = {}) { const results = []; for (const prompt of prompts) { try { const variations = await AiPixelPerfect.generateDesign(prompt, { ...baseOptions, variations: 1 // Single variation per prompt for efficiency }); results.push({ prompt: prompt, design: variations[0], status: 'success' }); } catch (error) { results.push({ prompt: prompt, design: null, status: 'failed', error: error.message }); } // Rate limiting: wait 1 second between requests await new Promise(resolve => setTimeout(resolve, 1000)); } return results;}// Usageconst prompts = [ 'modern website hero image with gradient background', 'product photography of smartwatch on wooden table', 'abstract geometric pattern for textile design'];const designs = await batchGenerate(prompts, { resolution: 2048 });```### Style Transfer Workflow```javascriptasync function applyCustomStyle(prompt, styleId, options = {}) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/styled`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.API_KEY}` }, body: JSON.stringify({ prompt: prompt, style_id: styleId, style_strength: options.styleStrength || 0.75, resolution: options.resolution || 2048, preserve_structure: options.preserveStructure || true }) } ); return await response.json();}// Create and apply custom brand styleasync function createBrandStyle(brandName, referenceFiles) { const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY); // Create style from brand assets const style = await client.createStyle( `${brandName}-brand-style`, referenceFiles, { description: `Official brand style for ${brandName}` } ); // Generate designs using the brand style const designs = await applyCustomStyle( 'social media banner for product launch', style.id, { styleStrength: 0.8 } ); return designs;}```### Progressive Refinement```javascriptasync function progressiveRefine(initialPrompt, iterations = 3) { let currentPrompt = initialPrompt; let bestDesign = null; for (let i = 0; i < iterations; i++) { const variations = await AiPixelPerfect.generateDesign(currentPrompt, { variations: 4, seed: i * 1000 // Different seed each iteration }); // Simulate selection (in real app, user would choose) bestDesign = variations[0]; // Refine prompt based on result currentPrompt = await enhancePrompt(currentPrompt, bestDesign); console.log(`Iteration ${i + 1}: ${currentPrompt}`); } return bestDesign;}async function enhancePrompt(originalPrompt, designResult) { // Use AI to suggest prompt improvements // In practice, this would call a prompt enhancement endpoint return `${originalPrompt}, enhanced details, professional quality`;}```## Export Integrations### Figma Export```javascriptasync function exportToFigma(designId, figmaFileKey, nodeId = null) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_ENDPOINT}/export/${designId}`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.API_KEY}` }, body: JSON.stringify({ platform: 'figma', target_file: figmaFileKey, target_node: nodeId, figma_token: process.env.FIGMA_ACCESS_TOKEN, format: 'png', scale: 2 }) } ); const result = await response.json(); return result.figma_url;}```### Adobe Creative Cloud Export```javascriptasync function exportToAdobe(designId, adobeProjectId) { const blob = await AiPixelPerfect.client.downloadDesign(designId, 'psd'); const formData = new FormData(); formData.append('file', blob, 'design.psd'); formData.append('project_id', adobeProjectId); const response = await fetch( 'https://api.adobe.io/cc/storage/upload', { method: 'POST', headers: { 'Authorization': `Bearer ${process.env.ADOBE_ACCESS_TOKEN}`, 'x-api-key': process.env.ADOBE_API_KEY }, body: formData } ); return await response.json();}```## Troubleshooting### Common Issues**Issue: Synthesis times out after 30 seconds**```javascript// Solution: Use async status polling for complex promptsasync function synthesizeWithPolling(prompt, options = {}) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/async`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.API_KEY}` }, body: JSON.stringify({ prompt, ...options }) } ); const { job_id } = await response.json(); // Poll for completion while (true) { const status = await fetch( `${process.env.NEXT_PUBLIC_API_ENDPOINT}/jobs/${job_id}`, { headers: { 'Authorization': `Bearer ${process.env.API_KEY}` } } ); const data = await status.json(); if (data.status === 'completed') { return data.result; } else if (data.status === 'failed') { throw new Error(data.error); } await new Promise(resolve => setTimeout(resolve, 2000)); }}```**Issue: Generated designs don't match prompt expectations**```javascript// Solution: Use detailed, structured promptsfunction buildStructuredPrompt(subject, style, lighting, mood, details = []) { return [ `Subject: ${subject}`, `Style: ${style}`, `Lighting: ${lighting}`, `Mood: ${mood}`, details.length > 0 ? `Details: ${details.join(', ')}` : '' ].filter(Boolean).join(' | ');}const prompt = buildStructuredPrompt( 'corporate office interior', 'modern minimalist', 'natural daylight from large windows', 'professional and welcoming', ['wooden desks', 'ergonomic chairs', 'green plants', 'clean lines']);```**Issue: Copyright conflict warnings on prompt**```javascript// Solution: Check prompt before synthesisasync function validatePrompt(prompt) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_ENDPOINT}/validate/prompt`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.API_KEY}` }, body: JSON.stringify({ prompt }) } ); const result = await response.json(); if (result.conflicts && result.conflicts.length > 0) { console.warn('Potential copyright conflicts:', result.conflicts); console.log('Suggested alternatives:', result.alternatives); return false; } return true;}// Use before generationconst isValid = await validatePrompt('logo similar to Nike swoosh');if (!isValid) { console.error('Prompt may infringe on existing IP');}```**Issue: Multilingual prompts not generating culturally appropriate designs**```javascript// Solution: Explicitly set language and cultural contextasync function generateWithCulturalContext(prompt, language, region) { return await AiPixelPerfect.generateDesign(prompt, { language: language, cultural_context: region, // 'japan', 'latin_america', 'middle_east', etc. respect_local_aesthetics: true });}// Example: Japanese designconst jpDesign = await generateWithCulturalContext( '伝統的な日本の庭園', 'ja', 'japan');```## Performance Optimization### Caching Strategy```javascriptclass DesignCache { constructor() { this.cache = new Map(); this.maxSize = 50; } getCacheKey(prompt, options) { return `${prompt}-${JSON.stringify(options)}`; } async getCached(prompt, options) { const key = this.getCacheKey(prompt, options); if (this.cache.has(key)) { const cached = this.cache.get(key); if (Date.now() - cached.timestamp < 3600000) { // 1 hour return cached.data; } } return null; } setCached(prompt, options, data) { const key = this.getCacheKey(prompt, options); if (this.cache.size >= this.maxSize) { const firstKey = this.cache.keys().next().value; this.cache.delete(firstKey); } this.cache.set(key, { data: data, timestamp: Date.now() }); }}const designCache = new DesignCache();async function generateWithCache(prompt, options) { const cached = await designCache.getCached(prompt, options); if (cached) { console.log('Returning cached design'); return cached; } const result = await AiPixelPerfect.generateDesign(prompt, options); designCache.setCached(prompt, options, result); return result;}```## Configuration Reference### Resolution Presets- `512`: Quick preview (draft quality)- `1024`: Standard web graphics- `2048`: High-quality prints and presentations- `4096`: Professional photography replacement- `8192`: Large format prints and billboards### Style Weight Guidelines- `0.0 - 0.3`: Subtle style influence, prompt-dominant- `0.4 - 0.6`: Balanced style and prompt- `0.7 - 1.0`: Strong style application, may override prompt details### Language CodesUse ISO 639-1 codes: `en`, `es`, `fr`, `de`, `ja`, `zh`, `ar`, `hi`, `pt`, `ru`, etc.

aradotso/design-skills/tree/main/skills/aipixelperfect-design-generator commit b9357fb92e

Frequently asked questions

npx skillmds@latest add aradotso/aipixelperfect-design-generator