aipixelperfect-design-generator
AI-powered image generation platform for professional design creation with prompt-based synthesis and real-time collaboration
소스 정보
- 저장소
- reason-machines/design-skills
- 최근 소스 활동
- 2026년 6월 30일 22:27
- 감지된 SKILL.md 언어
- 영어
- 스타
- 4
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- aipixelperfect-design-generator
- description
- AI-powered image generation platform for professional design creation with prompt-based synthesis and real-time collaboration
- triggers
- ["generate AI design with AiPixelPerfect","create professional graphics using AI image generator","synthesize images from text prompts","use AiPixelPerfect for design work","integrate AI design generation into workflow","export AI-generated designs to design tools","configure AiPixelPerfect image synthesis","troubleshoot AI design generation issues"]
# 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 Access
1. Navigate to the hosted platform:
```bash
# Open the web interface
open https://abnormal-codex.github.io/Ai-Pixel-Design-Archive/
```
2. Create an account and authenticate via the UI
### Local Development Setup
```bash
# 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
```bash
# .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
1. **Prompt Input** → Descriptive text of desired image
2. **Synthesis** → Neural engine generates 4 variations
3. **Selection** → Choose best matching variation
4. **Refinement** → Adjust parameters with sliders
5. **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">
<!-- 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 onclick="applyRefinements()">Apply Changes</button>
</div>
</div>
<script src="scripts/aipixel-core.js"></script>
</body>
</html>
```
### JavaScript Core Functions
```javascript
// 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
```javascript
// 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
```javascript
// 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`;
GitHub에서 보기이 SKILL.md는 매우 커서 SkillsMP가 여기에는 첫 섹션만 미리 보여줍니다. GitHub에서 보기
